Create this Fullstack App Fewvlearns - Frontend
» Important Links
» 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).