Change the Front-End

[StefanPenchev05]

I think it is better for this application to stick to MERN Stack, I have done some research, since I don't know NextJS and found out that NextJS is a framework what plays like full-stack application. Meaning we won't need Express as Back-End.

But why we need the Express, since NextJS is like Back-End. Well, the Back-End is very limited in NextJS and most to the features in this application won't fit with NextJS

Install React with typescript, redux and tailwindcss.

1. Create a new React project with TypeScript template npx create-react-app client --template typescript

2. Navigate to the project directory cd ./client

3. Install Redux and its React bindings npm install @reduxjs/toolkit react-redux

4. Install Tailwind CSS npm install tailwindcss

5.Generate your tailwind.config.js file

npx tailwindcss init

6. Open the tailwind.config.js file and configure it

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

7.Import Tailwind's base, components, and utilities styles in your src/index.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

The Architecture of the app should look like this

[StefanPenchev05]

I hope I gave a further instruction on the file structor if want to see more here is a great blog about it CLICK HERE

src/
│   ├── app/
│   │   ├── store.js
│   │   └── AppReducer.js
│   ├── components/
│   │   ├── Navbar/
│   │   │   ├── Navbar.js
│   │   │   └── Navbar.css
│   │   ├── Sidebar/
│   │   │   ├── Sidebar.js
│   │   │   └── Sidebar.css
│   │   └── Footer/
│   │       ├── Footer.js
│   │       └── Footer.css
│   ├── features/
│   │   ├── users/
│   │   │   ├── UsersSlice.js
│   │   │   └── UsersAPI.js
│   │   └── posts/
│   │       ├── PostsSlice.js
│   │       └── PostsAPI.js
│   ├── hook/
│   │   └── useCustomHook.js
│   ├── images/
│   │   ├── logo.svg
│   │   └── banner.jpg
│   ├── pages/
│   │   ├── HomePage.js
│   │   ├── AboutPage.js
│   │   └── ContactPage.js
│   ├── utils/
│   │   └── helperFunctions.js
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   └── index.js