Build a Portfolio Builder App: Learn ReactJS (FullStack)

In this chapter, we'll explore the fundamental building blocks of web development: HTML, CSS, JavaScript, and React JS. Each of these elements plays a crucial role in creating dynamic and engaging websites. Let's get started by understanding the basics of each component!

1. Introduction to Basics of Web Development

• Web development is like building a car from scratch. You start with the basics and gradually add more features to make it functional and attractive.

1. HTML

• HTML is the framework of the car, like its chassis (the frame). It provides the structure and foundation upon which everything else is built. Just as the chassis holds the car's components together, HTML organizes the content of a webpage.

1. CSS

• CSS is like the paint job and styling of the car. It determines how the car looks and feels, from its color and design to its interior decor. Similarly, CSS styles the HTML content, making it visually appealing and engaging for users.

1. JavaScript

• JavaScript acts as the engine of the car, powering its functionality and interactivity. It enables dynamic features like responsive buttons, animations, and form validations, just as the engine drives the car's movement and performance.

1. React Js

• React JS is like upgrading the car with advanced technology and customizable components. It allows developers to create reusable parts (components) for the car, making it easier to maintain and modify. Think of it as adding smart features like automatic parking or adaptive cruise control to enhance the car's capabilities.

• In this chapter, we're going to learn about the basic tools you need to start building with React. We'll focus on two main things: Node.js and Visual Studio Code (VS Code).

• First, we'll talk about Node.js. It's like a foundation for running JavaScript code outside of web browsers. We'll see why it's important for building modern web applications and how it helps us create powerful server-side programs. Installing Node.js will give us access to lots of useful features that we'll need for our React projects.

  
  

• Then, we'll look at Visual Studio Code, a tool made by Microsoft for writing code. It's popular because it's really flexible and has lots of extra tools you can add to make coding easier. We'll see why it's a great choice for React development and how it can help us write, debug, and manage our code effectively.

• Throughout the chapter, we'll give you simple instructions for installing Node.js and VS Code on your computer. By the end of it, you'll have everything you need to start building with React, all set up and ready to go.

• In this introductory chapter, we're setting the stage for building a full-stack React application. The application will include front-end components developed in React, integrated with a back-end server for data storage and retrieval. Users will log in using Gmail authentication, fill out a portfolio form, and their data will be stored in the back-end. The front-end will dynamically display user-specific information on a portfolio template, featuring home, about, and contact pages. We'll focus on optimizing user experience with React's capabilities, utilizing technologies like Sanity for content management and Tailwind for styling. Finally, we'll deploy the full-stack application for hosting and sharing.

• In this chapter, we'll initiate our project by setting up a React application using the "create-vite" utility for swift file generation. We'll integrate Tailwind CSS for efficient styling and configure it within our project. The chapter will focus on establishing our development environment, including installing essential dependencies and initializing Tailwind CSS configuration. Additionally, we'll explore basic usage of Tailwind CSS by applying styles to elements in our React components. Finally, we'll ensure our development server is operational, enabling us to commence coding our project seamlessly.

In this chapter, we're laying the groundwork for integrating Google Authentication into our React application using react-router-dom for routing. Before setting up authentication, we start by cleaning up unnecessary code in app.js and organizing our project structure. Then, we set up routes for different pages using react-router-dom. We create separate components for login, main, about, and contact pages, and define routes for each of them. This ensures that users are directed to the appropriate page based on the URL path they access. Finally, we test our routing setup to ensure smooth navigation between different pages before moving on to implement authentication.

• This chapter focuses on integrating Google Authentication into a React application using the react-oauth-google package. Initially, we clean up unnecessary code and set up routes for different pages using react-router-dom. Then, we install the react-oauth-google package and configure the Google OAuth client ID. Next, we create a login page with a Google login button and style it with a background image and logo. We use environment variables to securely store the client ID. Finally, we test the Google login functionality and ensure that users can log in seamlessly.

• In this chapter, we delve into the mechanics of Google login integration within our application. As users log in using their Google accounts, we extract crucial information such as their name, email, and profile picture from Google's response object. Leveraging React's useState hook, we manage and store this user data efficiently within our app. Furthermore, we employ the useEffect hook to ensure that the user's login status persists even if they navigate away from the page or refresh the browser. Ultimately, upon successful authentication, users are seamlessly redirected to the main page, providing a smooth and intuitive experience.

In this chapter, we focus on implementing user authentication and page navigation within our application. We start by utilizing local storage to determine the user's login status. By checking for the presence of a user info object in local storage and validating the length of the user's email, we ensure that only authenticated users are granted access to the main page. If the user is not logged in, they are automatically redirected to the login page. This approach enhances security and ensures a seamless user experience. Additionally, we explore the use of the useNavigate hook to facilitate smooth transitions between different pages based on the user's authentication status.

• In this chapter, we will lay the foundation for building a user portfolio feature. We'll start by creating a user form where individuals can input their details, including name, experience, skills, and upload an image. This information will be stored in the backend upon form submission. Additionally, we'll set up the infrastructure for generating unique links for each user's portfolio page. While the actual display of portfolios will be addressed in subsequent chapters, this chapter focuses on setting up the basic functionality and structure necessary for future development.

• In this chapter, we will integrate Sanity as our backend solution for storing user portfolio data. We'll explore why local storage isn't suitable for this purpose and why we opt for a cloud-based solution like Sanity. After signing up and initializing our project with Sanity, we'll set up our backend environment and explore the basics of Sanity Studio. We'll learn how to define schemas, create documents, and store data in our Sanity project. Additionally, we'll understand how to start the Sanity development server and navigate the Sanity Studio interface. This chapter lays the groundwork for connecting our user form to the Sanity backend in subsequent chapters.

• In this chapter, we will set up our backend using Sanity, a content management platform. We'll start by creating schemas for our data, including a user schema to store login information and a profile schema to store portfolio form data. Next, we'll configure our Sanity client by creating a client.js file and obtaining an API token. Then, we'll use useEffect to create documents in Sanity when a user logs in, ensuring that each user is represented in our backend. Finally, we'll verify user login by comparing email data stored in local storage with email data stored in Sanity, providing a robust authentication mechanism for our application.

• In this chapter, we'll explore fetching data from Sanity and enhancing our login system. First, we'll simplify our useEffect by removing unnecessary conditions and implementing try-catch exception handling. Then, we'll verify the user's email stored in local storage against the email stored in Sanity. Using the client.fetch method, we'll query Sanity to fetch user data based on the email. If a matching email is found, the user is considered verified, and the loading state is set to false. Otherwise, the user is redirected to the login page. This chapter strengthens our login system by integrating Sanity for user verification and data management.

• In this chapter, we'll integrate form data into Sanity, a vital step in storing user information. We'll explore npmjs.com for Sanity's functions and implement key functionalities like document creation and replacement. Using the handleSummit function, we'll capture form data, prevent default form submission, and set a loading state for user feedback. We'll structure the data into an object, create a document with the necessary fields, and generate a unique ID. Finally, we'll update the loading state and provide users with a customized URL for accessing their portfolio.

• In this chapter, we will create portfolio pages for our website. We'll start with designing the homepage, where users can see their profile picture, name, and role. Then, we'll move on to the about page, where we'll display additional details such as skills and experience. Next, we'll create a contact page to showcase the user's email address. Additionally, we'll design the header and footer components to maintain consistency across pages. Finally, we'll implement dynamic routing based on the user's ID in the URL, allowing users to navigate between their portfolio pages seamlessly.

• In this chapter, we will replicate the logic implemented in the home page for the about and contact pages. The logic involves fetching user data based on the user's email ID and rendering it on the page if it exists. If the user does not exist or if the data is not available, the page will display a loading indicator or redirect to a 404 error page. The design of these pages is kept simple, with elements such as profile pictures, first and last names, and additional information like skills and work experience being displayed. The logic includes conditional rendering based on the presence of user data, ensuring a seamless user experience across all pages.

• In this chapter, we extended the functionality of the portfolio project to allow multiple users to create their portfolios. Users can now log in with different IDs, such as "techy recon" or "standardoutput," and input their information, including profile pictures, names, about sections, work experience, roles, and skills. The data is stored in the Sanity database, and each user's portfolio is accessible via a unique URL containing their ID. This allows for a scalable solution where numerous users can create and share their portfolios using the same template. Additionally, we discussed the potential for further enhancements to the project and emphasized the importance of deploying it as a live website that users can include in their resumes.

• In this chapter, we will deploy our website using Netlify. First, sign up on app.netlify.com using GitHub. Create a _redirects file in the public folder of your project to define paths and routes. Run npm run build in the command prompt to create a build folder. Upload the dist folder to Netlify using the browse option. Change the site name in site configuration and save it. Ensure that CORS origins are added to Google Cloud Console and Sanity for authentication. Finally, explore options to add templates for users to choose from when creating their portfolios, enhancing the project further.