Skip to content

Update README.md #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update README.md #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 29 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,34 @@
# React + Vite
# 🛠️ My First React Project

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Welcome to my first React.js project! This application was built as part of my learning journey into modern frontend development using **React** and **Tailwind CSS**. It includes features like form validation, routing, sidebar navigation, responsive layouts, and user interactions.

Currently, two official plugins are available:
> ⚠️ **Disclaimer**:
> This project is strictly for **educational and personal learning purposes**.
> It is **not intended for production** or commercial use.

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
---

## 🚀 What I Learned

- 🧱 React component structure
- 🧭 React Router for navigation
- 🧪 Form validation using `react-hook-form` and `zod`
- 🎨 Styling with Tailwind CSS
- 💡 Lazy loading using `React.lazy` and `Suspense`
- 📱 Responsive UI with mobile sidebar toggle
- 🔐 Basic auth flow using mock API
- 🧰 State management with React hooks (`useState`, `useEffect`, etc.)

---

## 🧰 Tech Stack

- **React**
- **Tailwind CSS**
- **React Router**
- **React Hook Form + Zod**
- **Axios**
- **Remix Icons**
- **Sonner** (for toast notifications)

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.