https://github.com/shahrintarin/mathematter
MathMatter is an interactive web application designed to make learning mathematics engaging, accessible, and intuitive.
https://github.com/shahrintarin/mathematter
css daisyui expressjs firebase html javascript jwt jwtauthentication mongodb nodejs react
Last synced: 2 months ago
JSON representation
MathMatter is an interactive web application designed to make learning mathematics engaging, accessible, and intuitive.
- Host: GitHub
- URL: https://github.com/shahrintarin/mathematter
- Owner: ShahrinTarin
- Created: 2025-06-25T11:15:26.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-25T11:31:29.000Z (12 months ago)
- Last Synced: 2025-06-25T12:27:37.333Z (12 months ago)
- Topics: css, daisyui, expressjs, firebase, html, javascript, jwt, jwtauthentication, mongodb, nodejs, react
- Language: JavaScript
- Homepage: https://mathmatter-by-shahrin-tarin.web.app/
- Size: 221 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📚🧪MathMatter♾️🌠
## Purpose
MathMatter is an interactive web application designed to make learning mathematics engaging, accessible, and intuitive. Whether you're a student strengthening core concepts or a math enthusiast solving advanced problems, MathMatter provides a dynamic platform with practice tools, problem sets, visualizations, and personalized progress tracking. With real-time feedback and a clean UI, it simplifies complex topics and fosters confident learning in a fun, gamified environment.
## Live URL
(https://mathmatter-by-shahrin-tarin.web.app/)
## Key Features
- **Responsive Design**: A clean, user-friendly layout with sections for a header, and footer.Seamless browsing with React and React Router.
- **Top Blogs** – Retrieve the top 10 blogs based on the word count of the long description.
- **Get All Blogs** – Filter blogs by `category` or `title` using query parameters.
- **Long Description's length Based Ranking**: Blogs sorted by length of long description for easy discovery.
- **User-Generated Blogs**: Upload Blogs with images, description, and categories.
- **Interactive Blog Cards**:comment, edit, or delete Blogs with real-time updates.
- **Personalized Blog Collections**: Filter Blogs by Blog's Title.
- **React-motion**:Motion increase the user experience.
- **Add Comment** – Post comments on individual blogs.
- **View Comments** – You can see all comments for a specific blog.
- **Add to Wishlist** – Add a blog to a user’s wishlist (duplicate prevention included).
- **Get Wishlist** – View all wishlist items for a specific user (requires JWT verification).
- **Delete Wishlist Item** – Remove a specific item from the wishlist by ID.
## NPM Packages Used
- **React**: Core library for building UI components.
- **React Router**: Enables single-page app routing for quizzes, profiles, etc.
- **react-dom**: Supports rendering React components in the DOM (included with Create React App).
- **sweet-alert2**: Provides a customizable, modern popup library for alerts and confirmations in web applications. Easily integrated with React to enhance user interactions with styled, animated dialogs, replacing basic browser alerts.
- **react-icons**: Offers a collection of popular icon libraries (e.g., Font Awesome, Material Icons) as React components. Simplifies adding scalable, customizable icons to React apps, enhancing UI with minimal setup.
- **Framer Motion**: Adds sleek transitions and UI animations.
- **styled-components:**: Facilitates reusable, scoped CSS styling for recipe cards and buttons, ensuring maintainable and consistent design (npm install styled-components).
---
## 📂 Project Structure
```
src/
├── assets/ # Static assets
├── components/ # Reusable components
├── contexts/ # Context providers
├── hooks/ # Custom hooks
├── pages/ # Page components
├── routes/ # App routing
```
## 🚀 Setup Instructions
### Prerequisites
- Node.js (v14 or later)
- MongoDB Atlas account
- Firebase project with Service Account
### Installation Steps
1. **Clone the repository**
```bash
git clone
cd project-directory
```
2. **Install dependencies**
```bash
npm install
```
3. **Set up environment variables** Create a `.env` file in root directory with
these variables:
```
PORT=3000
DB_USER=your_mongodb_username
DB_PASS=your_mongodb_password
JWT_SECRET_KEY=your_jwt_secret
FB_SERVICE_KEY=your_firebase_service_account_base64
```
4. **Run the server**
```bash
npm start
# or for development
npm run dev
```
5. **Test the server** The server should be running at:
```
http://localhost:3000
```
---
## Live URL For Backend
(https://assignment-11-server-two-drab.vercel.app/)
## ⚙️ Tech Stack
| Tech | Usage |
|----------------|------------------------------|
| Node.js | Backend runtime |
| Express.js | Web server framework |
| MongoDB | Database (with collections: blogs, wishlist, comments) |
| Firebase Admin | JWT authentication & decoding |
| Cookie-Parser | JWT cookie handling |
| CORS | Cross-origin resource sharing |
---
## 🔐 Middleware
- **`verifyJWT`**: Ensures requests have a valid Firebase ID token and attaches the decoded email to the request.
- Applies to secure endpoints like `GET /wishlist/:email` and `POST /blogs`.
---
## 📁 API Endpoints Overview
| Method | Route | Description |
|--------|---------------------------|---------------------------------------|
| GET | `/blogs` | Get all blogs with optional filters |
| GET | `/blogs/:id` | Get a single blog by ID |
| POST | `/blogs` | Add a new blog (JWT required) |
| PUT | `/blogs/:id` | Update a blog |
| GET | `/recentblogs` | Get the 6 latest blogs |
| GET | `/topblogs` | Get top 10 blogs (by description size)|
| GET | `/wishlist/:email` | Get user’s wishlist (JWT required) |
| POST | `/wishlist/:blogId` | Add to wishlist (prevents duplicates) |
| DELETE | `/wishlist/:id` | Delete wishlist item |
| POST | `/comment/:blogId` | Add a comment to a blog |
| GET | `/comment/:blogId` | View all comments for a blog |
---