Create this Fullstack App Fewvlearns - Frontend

  1. GitHub Repository Link

  2. Create Client Folder Structure

» Prerequisites

Now, let’s talk about the prerequisites. You should have Node.js, npm, and MySQL Workbench installed on your local machine. Additionally, you’ll need an AWS account with the necessary permissions to create a database using RDS. Just to clarify, the AWS database we’ll create will be within the free tier limit, so there’s no need to worry about costs. However, if you prefer not to use AWS RDS, that’s perfectly fine—you can use any other service you’re familiar with.

» Set Up Frontend Folder

Follow this guide for basic structure of our webiste using vite, react, and tailwind. Once you’ve set up Tailwind CSS in a Vite project, add these files into the src directory. Or visit github repository for full folder structure.


├── src
│   ├── App.css
│   ├── App.jsx
│   ├── HomePage.jsx
│   ├── Team.jsx
│   ├── assets
│   ├── blogs
│   │   ├── generate-jwt.md
│   │   ├── k8s-basics.md
│   │   ├── learn-docker.md
│   │   └── learn-figma-react.md
│   ├── components
│   │   ├── auth
│   │   │   ├── AuthContext.jsx
│   │   │   ├── Cancel.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── PrivateRoute.jsx
│   │   │   ├── Register.jsx
│   │   │   └── Success.jsx
│   │   ├── blog
│   │   │   ├── Blog.jsx
│   │   │   └── BlogList.jsx
│   │   ├── common
│   │   │   ├── Footer.jsx
│   │   │   └── Navigation.jsx
│   │   └── courses
│   │       ├── CourseContent.jsx
│   │       ├── CourseDetails.jsx
│   │       ├── CoursePlayer.jsx
│   │       ├── Courses.jsx
│   │       └── MyCourses.jsx
│   ├── index.css
│   └── main.jsx

» Install dependencies

Now we need to install all of the dependencies before moving on further.

Open the terminal and run the command:

npm install axios github-markdown-css gray-matter highlight.js markdown-it react-icons react-markdown react-router-dom react-syntax-highlighter rehype-raw remark-gfm

And to install dev-dependencies run the command:

npm install -D vite-plugin-markdown

» Start Creating the Project

And just like this, one by one create all of the files. But befor that bring in all of the assets(images).

» Assets

» Navigation.jsx

» Home.jsx

» App.css

» Footer.jsx

» BlogList.jsx

» Blog.jsx

» Markdown-files

» Team.jsx

» Register.jsx

» Login.jsx

» AuthContext.jsx

» PrivateRoute.jsx

» Success.jsx

» Cancel.jsx

» Courses.jsx

» MyCourses.jsx

» CoursesContent.jsx

» CourseDetails.jsx

» CoursesPlayer.jsx