Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tinyhiker/tyrell_book_store
Tyrel Bookstore built using JavaScript, React, Express, Node, and MongoDB
https://github.com/tinyhiker/tyrell_book_store
cors dotenv express firebase-login firebase-storage mongodb mongoose node react react-redux react-redux-toolkit react-router redux-toolkit-query sweetalert2 tailwindcss
Last synced: 1 day ago
JSON representation
Tyrel Bookstore built using JavaScript, React, Express, Node, and MongoDB
- Host: GitHub
- URL: https://github.com/tinyhiker/tyrell_book_store
- Owner: tinyHiker
- Created: 2024-12-11T01:17:40.000Z (about 1 month ago)
- Default Branch: master
- Last Pushed: 2025-01-17T04:07:26.000Z (2 days ago)
- Last Synced: 2025-01-17T04:29:41.617Z (2 days ago)
- Topics: cors, dotenv, express, firebase-login, firebase-storage, mongodb, mongoose, node, react, react-redux, react-redux-toolkit, react-router, redux-toolkit-query, sweetalert2, tailwindcss
- Language: JavaScript
- Homepage: https://tyrell-deployment-b1i7brw7b-taha-iqbals-projects.vercel.app/
- Size: 12.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tyrell Bookstore
**A full-stack MERN (MongoDB, Express, React, Node) bookstore application with CRUD functionality, Firebase authentication, React-Redux state management, and role-based route protection.**
## Click the image to see the demo video (or visit the site link)
[Site Link](https://tyrell-deployment-b1i7brw7b-taha-iqbals-projects.vercel.app/)
[](https://www.youtube.com/watch?v=Kz64tc0Pe0A)
## Technology Stack
### Frontend
- **React 18** (Vite for bundling and dev server)
- **React Router 7** for client-side routing
- **Redux Toolkit** & **RTK Query** for global state management and data fetching
- **Chakra UI** + **Tailwind CSS** for styling and responsive layout
- **Framer Motion** for animations
- **Chart.js** / **react-chartjs-2** for rendering analytical charts
- **Axios** for HTTP requests (used in some places alongside RTK Query)
### Backend
- **Node.js** & **Express** for the server and RESTful APIs
- **MongoDB** & **Mongoose** for database and schema modeling
- **CORS** for cross-origin requests
- **Dotenv** for environment variable management
### Authentication
- **Firebase** (`firebase.auth()`, `GoogleAuthProvider`)
- **Firestore** not used for data in this project, but **Realtime** authentication state is used for the front-end.
- Custom backend endpoints sync user data (`/api/real-users`) with MongoDB using the Firebase `uid`.
## Application Architecture
```txt
┌─────────────────────────────────┐
│ React Frontend (Vite) │
│ - Redux Toolkit │
│ - React Router │
│ - Chakra UI / Tailwind │
│ - Firebase Auth Context │
└─────────────▲──────────────────┘
│
│ (HTTP, RTK Query / Axios)
│
┌─────────────┴──────────────────┐
│ Express.js Backend │
│ - RESTful API routes under │
│ /api/ │
│ - Admin & Private routes │
└─────────────▲──────────────────┘
│
│ (ODM via Mongoose)
│
┌─────────────┴──────────────────┐
│ MongoDB Atlas │
│ - Users, Books, Orders, etc. │
└─────────────────────────────────┘
```
## Functionality
1. **Add Books to Cart and Checkout**
2. **View Books By Category**
3. **Central Home Page**
4. **View Order History**
5. **Contact Me Form**
6. **Register and Login**
7. **Register and Login With Google**
---
## Key Features
1. **User Registration & Login**
- Firebase Authentication (Email/Password & Google OAuth)
- Automatic MongoDB record creation for new users (via `RealUser` collection)
2. **Protected Routes**
- **PrivateRoute**: Ensures that certain pages (e.g., Orders) are accessible only to logged-in users.
- **AdminRoute**: Allows only admin (or token-based) access to certain pages/statistics.
3. **Redux Toolkit**
- Centralized application state with `cartSlice`, `booksApi`, `ordersApi`, `quotesApi`, `realUsersApi`.
- RTK Query for asynchronous data fetching and caching of books, orders, quotes, etc.
4. **Bookstore Essentials**
- Browse books (with author info, reviews, quotes)
- Add to cart, place orders
- View past orders (protected route)
- Manage authors, reviews, and quotes from the admin perspective
5. **UI/UX Enhancements**
- **Chakra UI** & **Tailwind CSS** for styling
- **Framer Motion** for smooth animations
- **SweetAlert2** for polished alerts and confirmations
- **Chart.js** integrated (via `react-chartjs-2`) for analytics
6. **CRUD Operations**
- Full suite of Create, Read, Update, Delete endpoints for books, authors, orders, users, reviews, and quotes.