This project replicates a real-world Ed-Tech website structure, featuring multiple pages such as home, about, contact, dashboard, login, and sign-up. While the project doesn't have a GUI for most pages, it serves as a deep dive into React routers, exploring various methods to route pages in a React application. The major focus of this project is implementing React Router and handling information among multiple pages using props.
- Multiple pages: Home, About, Contact, Dashboard, Login, and Sign-up.
- Forms pages with controlled components for handling and validating user data efficiently.
- Protected routes to guard against direct access to protected pages.
- Implementation of React Router with a focus on useNavigate, Navigate, Link, and NavLink.
- Styling using Tailwind CSS.
- Integration of plugins: React-hot-toasts and react-icons.
- src/components: Contains React components used throughout the project.
- src/pages: Individual page components for home, about, contact, dashboard, login, and sign-up.
- src/App.js: Main component handling routing and layout.
- src/App.css: Styles for the main application.
- public: Public assets.
- Clone the repository:
git clone https://github.com/AbhishekNavgan95/Code-Hex/ - Navigate to the folder:
cd Code-Hex - Install dependencies:
npm install - Run the project:
npm start
- React
- React Router
- Tailwind CSS
- React-hot-toasts
- react-icons
- Love Babbar's DOT BATCH lectures for inspiration and guidance.
This project provided valuable insights into React routers, creating protected routes, understanding React components, and implementing controlled components for form handling and validation. Additionally, it introduced me to useful plugins like React-hot-toasts and react-icons.
Happy coding! <3...