AbhishekNavgan95 / Code-Hex

A react project showcasing routing and form handling of a frontend application by using react router and props

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

1. Clone the repository: git clone https://github.com/AbhishekNavgan95/Code-Hex/
2. Navigate to the folder: cd Code-Hex
3. Install dependencies: npm install
4. 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...