Skip to content

yaserdemet/router-avatar-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Animation

📍 click here to see page

Description

Project aims to create a Multiple Page Application with React Router

❓ Problem Statement

  • Have multiple pages, and visiter should visit releated pages when click instructor detail. Give information about It courses

Project Skeleton

005 - Movie App (folder)
|
|----readme.md         # Given to the students (Definition of the project)
SOLUTION
├── public
│     └── index.html
├── src
│    ├── auth
│    │     └── firebase.js
│    ├── components
│    │     |__ About.jsx
│    │     |__ Courses.jsx
|    |     |__ Footer.jsx
|    |     |__ Nav.jsx
│    ├── context
│    │     └── AuthContext.js
│    ├── pages
│    │     ├── Aws.jsx
│    │     ├── Contact.jsx
│    │     ├── Fullstack.jsx
│    │     └── Home.jsx
|    |     ├── Fullstack.jsx
|    |     |__ InstructorDetail.jsx
|    |     |__ NotFound.jsx
|    |     |__ Paths.jsx
|    |     |__ PrivateRouter.jsx
│    ├── helper
│    │     └── Toast.js
│    ├── img
|    |    |── images
│    ├── App.js
│    ├── App.css
│    ├── index.js
│    └── index.css
├── package.json
├── .env
└── yarn.lock

At the end of the project, following topics are to be covered;

🛠 Props and State Logic

🛠 React Hooks ( useState, useEffect, useNavigate, useLocation )

🛠 Global State Management ( Context Api )

🛠 Private Router

🛠 React Router Pages

🛠 3rd Part Libraries ( Toastify, Axios )

🛠 Crypto apiKeys in .env files

🛠 Deployment with Vercel and Netlify

At the end of the project, i will be able to;

✅ improve coding skills within HTML & CSS & JS & ReactJS.

✅ use git commands (push, pull, commit, add etc.) and Github as Version Control System.