🎉 Everything is free here. Read more →
Tutorial
Project Tutorial
OctoSpace
Frontend Setup

Frontend Installation and Setup

Folder Structure

To Go back to the parent directory, use the command cd ..

  1. For the frontend, we will be using ReactJS. So, In the root directory, open the terminal and type the following command to create a new ReactJS project. npx create-react-app client

If you don't have npx installed on your machine, you can use the following command to install it globally using the Node.js package manager (npm): npm install -g npx

  1. Now in your terminal, navigate to the client folder using the command cd client
  2. Now, in your terminal type the following command to install the required dependencies for the frontend.
npm i react-redux @reduxjs/toolkit redux-persist react-dropzone dotenv formik yup react-router-dom@6 @mui/material @emotion/react @emotion/styled @mui/icons-material
  • react-redux: This package allows you to use Redux with React. It provides bindings to connect your React components to the Redux store.
  • @reduxjs/toolkit: This package provides a set of tools to make it easier to write Redux code. It includes utilities for creating actions and reducers, as well as other helpful functions.
  • redux-persist: This package allows you to persist your Redux store data so that it can be restored even if the user refreshes the page or closes the app.
  • react-dropzone: This package provides a component for handling file uploads using drag-and-drop.
  • dotenv: This package loads environment variables from a .env file into process.env.
  • formik: This package helps with building forms in React. It makes it easier to handle form state and validation.
  • yup: This package is used for object schema validation. It can be used with Formik for form validation.
  • react-router-dom@6: This package provides routing capabilities for React applications. Version 6 is specified here.
  • @mui/material: This package provides Material UI components for use in React applications.
  • @emotion/react and @emotion/styled: These packages provide CSS-in-JS styling capabilities for React components using the Emotion library.
  • @mui/icons-material: This package provides Material Design icons for use in Material UI components.
  1. Make a new folder inside public folder and name it as assets. This folder will contain all the images and icons used in the frontend.
  2. Now delete some files from the src folder. Delete the following files:
    • App.css
    • App.test.js
    • logo.svg
    • reportWebVitals.js
    • setupTests.js
  3. Now remove some lines from the index.js file. Remove the following lines:
    • import reportWebVitals from './reportWebVitals';
    • And the line where reportWebVitals() is called and commented lines.
  4. Now, in the app.js file, remove some files so that it looks like this:
import "./App.css";
 
function App() {
  return <div className="app"></div>;
}
 
export default App;
  1. Now I'm gonna import some google fonts so go to fonts.google.com and select the fonts you want to use. I'm gonna use the following fonts:
    • rubik (opens in a new tab)
    • Regular 400 and Medium 500 and Bold 700
    • click on the + button and then under the section Use on the web, select import and copy the link tag.
    @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Inter:wght@500&family=Nunito:wght@600&family=Rubik:wght@400;500;700&display=swap');
    • clear the index.css file and paste the link tag in it.
    • Now write some css for the body tag in the index.css file.
    html,
body,
#root,
.app {
  height: 100%;
  width: 100%;
  font-family: "Rubik", sans-serif;
}
  2. Add another file in client folder and name it as jsconfig.json. This file will help us to import files from the src folder using absolute paths. Paste the following code in the file:
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
Data InsertingRedux Setup