Code-Hex

Overview

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.

Features

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.

Project Structure

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.

Getting Started

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

Dependencies

React
React Router
Tailwind CSS
React-hot-toasts
react-icons

Acknowledgments

Love Babbar's DOT BATCH lectures for inspiration and guidance.

Learnings

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...

AbhishekNavgan95/Code-Hex