diff --git a/0-1/projects/basic-wallet-app/README.md b/0-1/projects/basic-wallet-app/README.md index a0959fc..cdda8e5 100644 --- a/0-1/projects/basic-wallet-app/README.md +++ b/0-1/projects/basic-wallet-app/README.md @@ -31,16 +31,36 @@ ## ❄️  Introduction -To-Do App created during Week-5 of 100xDevs Cohort by Harkirat Singh. +Wallet App created during Week-8 of 100xDevs Cohort by Harkirat Singh.

- Jio Network blocking the view? Network switch reveals the magic! + Jio Network blocking the view? Network switch reveals the magic!


## 🔋  Features - **Organized File and Folder Structure**: Maintain a well-organized file and folder structure for easy navigation and management. + +- **Intuitive UI**: Well-organized and intuitive user interface design for a smooth user experience. + +- **Server Side State Management**: Leveraged React Query for efficient data fetching and caching. + +- **Client Side States Management**: Recoil for managing global state at client side. + +- **Custom Hooks**: Efficient data management with a custom hooks. + +- **Schema Validation**: Enforced schema validation on both frontend and backend for enhanced data integrity using zod. + +- **Secure Authentication**: Robust authentication using JWT tokens. + +- **Security Measures**: Implemented rate limiting and refereshing tokens. + +- **Documentation**: For clarity & a local development setup guide. + +- **Fully Responsive Design**: Utilize Tailwind CSS utilities for great UX across different screen sizes. + +- **Dark and Light Mode**: Seamlessly switch between dark and light themes for personalized visual preferences.

## ⚙️  Tech Stack @@ -50,6 +70,8 @@ To-Do App created during Week-5 of 100xDevs Cohort by Harkirat Singh. - [React](https://react.dev/) – library for building UI - [Node.js](https://nodejs.org/) – JavaScript runtime - [Tailwind CSS](https://tailwindcss.com/) – utility-first CSS framework +- [Recoil](https://recoiljs.org/) – library for state management +- [Tanstack Query](https://tanstack.com/query/latest) – library for asynchronous state management - [Mongoose](https://mongoosejs.com/) – MongoDB object modeling - [RESTful API](https://restfulapi.net/) – API design principles - [Git](https://git-scm.com/) – versioning @@ -77,6 +99,81 @@ To-Do App created during Week-5 of 100xDevs Cohort by Harkirat Singh. cd 100xdevs-full-stack-mastery/0-1/projects/basic-wallet-app/ ``` +3. **Setup Backend:** + + - **Navigate to the Backend Codebase:** + + ```bash + cd server/ + ``` + + - **Install dependencies:** + + ```bash + npm install + ``` + + - **Add Environment Variables:** + + Create .env file in the root folder and copy paste the content of .env.sample. + + ```bash + cp .env.sample .env + ``` + + If required, add necessary credentials. + + - **Start the Server:** + + ```bash + npm start + ``` + + - **Explore the API:** + + Access the project APIs at the specified endpoints using [API Docs](https://documenter.getpostman.com/view/31850881/2sA3Bn7srM). + +4. **Setup Frontend:** + + - **Navigate to the Frontent Codebase:** + + ```bash + cd client/ + ``` + + - **Install dependencies:** + + ```bash + npm install + ``` + + - **Add Environment Variables:** + + Create .env file in the root folder and copy paste the content of .env.sample. + + ```bash + cp .env.sample .env + ``` + + If required, add necessary credentials. + + - **Start the frontend app:** + + ```bash + npm run dev + ``` + + - **Start the backend server:** + + ```bash + cd ../server + npm start + ``` + + - **Open app in browser:** + + Visit [https://localhost:5173](https://localhost:5173) to access frontent. +
## 🤝  Contributing diff --git a/0-1/projects/basic-wallet-app/assets/wallet-app.png b/0-1/projects/basic-wallet-app/assets/wallet-app.png new file mode 100644 index 0000000..0450ad7 Binary files /dev/null and b/0-1/projects/basic-wallet-app/assets/wallet-app.png differ