https://github.com/tinyHiker/tyrell_book_store
Tyrell Bookstore is a store for fantasy and fantastical fiction. It features the biggest hits from all the major fiction categories. Users can login, register, add items to their carts, checkout, see their order history, and view their user profile
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: 5 months ago
JSON representation
Tyrell Bookstore is a store for fantasy and fantastical fiction. It features the biggest hits from all the major fiction categories. Users can login, register, add items to their carts, checkout, see their order history, and view their user profile
- Host: GitHub
- URL: https://github.com/tinyHiker/tyrell_book_store
- Owner: tinyHiker
- Created: 2024-12-11T01:17:40.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-20T03:15:47.000Z (12 months ago)
- Last Synced: 2025-03-11T18:54:18.173Z (10 months 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.vercel.app/
- Size: 14.3 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.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.