Linda & Bianka | PR #114

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.

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

LindaSchonfeldt wants to merge 270 commits into Technigo:main from LindaSchonfeldt:main

.vscode/settings.json

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{}

README.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,13 +1,89 @@
  
    # Final Project

    <img src="https://github.com/user-attachments/assets/0087564e-2352-4c3d-b8ae-f44eab60acaf" alt="Naima_logo" width="300" height="200">

    Replace this readme with your own information about your project.

    # Naima — Fika with Benefits

    Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.

    A full-stack MERN app for Naima, a Swedish fika brand. The site showcases products, the brand story, an interactive store map, and a company dashboard for wholesale partners.

    ## The problem

    ## 🧩 The assignment

    Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?

    Build a production-style full-stack web app with persistent data, authentication, and a modern, accessible UX. Ship a public site and protected “company” area, integrate at least one external service, and document everything.

    ## View it live

    ## The plan

    Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
      
    Goals

    - Represent Naima’s brand online (products, story, social, where to buy).

    - Serve real data from a backend (products, partners, retailers).

    - Provide a simple, secure wholesale dashboard.

    - Be fast and accessible.

    Approach

    - Plan: MVP → iterate. Start with static JSON/data and progressively wire backend.

    - Tech choices:

      - Frontend: React (Vite), styled-components, Zustand, Framer Motion, React Hook Form, Leaflet.

      - Backend: Express, Mongoose/MongoDB Atlas, JWT auth, express-validator, rate-limit.

      - Performance: lazy images, pre-geocoded retailers, simple animations that respect prefers-reduced-motion.

      - A11y first: skip link, keyboard hamburger with focus trap, visible focus, ≥44px tap targets, ARIA-labeled carousel dots.

        If we had more time: admin CRUD, IG Graph API with caching, tests, and analytics.

    ## ✨ Highlights

    - Modern stack: React + Vite, themeable design system via styled-components.

    - Real data: Products & partners from the backend; retailers shown on a map.

    - Map: Leaflet + OSM tiles; inline SVG pins tinted with brand palette.

    - Auth: JWT; protected company dashboard.

    - A11y: Lighthouse Accessibility 100% (skip link, keyboard nav, proper labels).

    - Performance: Lazy images, static geocoded JSON, reduced motion support.

    ## Frontend Structure

    The frontend uses a React component-based architecture.

    Main folders:

    src/components/: Reusable UI components

    src/pages/: Route components (views)

    src/sections/: Page sections/layouts

    src/data/: Static data (models)

    src/styles/: Styling system

    ## Backend Structure

    The backend follows an MVC pattern with a service layer (Node.js + Express + MongoDB).

    Main layers:

    - Routes: URL mapping (presentation/routing)

    - Controllers: HTTP request/response handling

    - Services: Business logic

    - Models: Data access (MongoDB schemas and operations)

    Architecture patterns used: MVC, 3-Tier, Layered, and Clean Architecture.

    ## 🌐 View it live

    Deployed Frontend: https://resetwithnaima.netlify.app/

    ### 🔐 Demo user:

    Email: demo@company.com

    Password: Demo123!

    Deployed Backend: https://naima-website.onrender.com/

    ## 👩‍💻 Developers - Find us:

    <table>

      <tr>

        <td align="center" width="150">

          <img src="https://github.com/LindaSchonfeldt.png" width="80px"/><br />

          <sub><a href="https://github.com/LindaSchonfeldt">Linda Schonfeldt</a></sub>

        </td>

        <td align="center" width="150">

          <img src="https://github.com/Bianka2112.png" width="80px"/><br />

          <sub><a href="https://github.com/Bianka2112">Bianka R</a></sub>

        </td>

        <!-- <td align="center" >

          <img src="https://user-images.githubusercontent.com/74038190/212750680-266fa8aa-39f1-4e8b-8873-7181dbaf3d7c.gif" />

       </td> -->

      </tr>

    </table>

backend/.babelrc

-Original file line number
+Diff line change
@@ -1,5 +1,3 @@
     {
-      "presets": [
-        "@babel/preset-env"
-      ]
-    }
+      "presets": ["@babel/preset-env"]
+    }

backend/.gitignore

-Original file line number
+Diff line change
@@ -0,0 +1,22 @@
+    # Dependencies
+    node_modules/
+    # Environment variables
+    .env
+    .env.local
+    .env.production
+    # Logs
+    *.log
+    npm-debug.log*
+    # Database
+    *.db
+    *.sqlite
+    # Uploads
+    uploads/
+    # OS
+    .DS_Store
+    Thumbs.db

backend/README.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,8 +1,128 @@
  
    # Backend part of Final Project

    # Naima Website — Backend

    This project includes the packages and babel setup for an express server, and is just meant to make things a little simpler to get up and running with.

    Lightweight README for the backend service (Express + Mongoose).

    ## Getting Started

    ## Overview

    1.  Install the required dependencies using `npm install`.

    2.  Start the development server using `npm run dev`.
      
    This Express app provides the API for the Naima website: companies, customers, products, orders, retailers, partners and admin operations. Routes are organized under `routes/` and handlers in `controllers/`. Mongoose models live in `models/`. Basic JWT authentication is implemented in `middleware/auth.js`.

    ## Requirements

    - Node.js 18+ (or your project's target)

    - npm

    - MongoDB (local or Atlas)

    ## Quick start

    1. Install

       ```bash

       npm install

       ```

    2. Create a `.env` file in this folder (see Environment).

    3. Start development server

       ```bash

       npm run dev

       ```

    4. Start production server

       ```bash

       npm start

       ```

    ## Environment variables

    Create `.env` with at least:

    - PORT=3001

    - MONGODB_URI=mongodb://localhost:27017/naima

    - JWT_SECRET=your_jwt_secret

    - NODE_ENV=development

    Adjust values to your environment (Atlas connection string, secrets, etc).

    ## Scripts

    Common scripts (expected):

    - `npm run dev` — development with auto-reload (nodemon)

    - `npm start` — start production server

    - `node scripts/seedData.js` — seed data (if present)

    Check `package.json` for exact script names in this repo.

    ## API overview

    Routes are mounted in `routes/`:

    - `/api/products` — product listing and management (controllers/productControllers.js)

    - `/api/orders` — create and manage orders (controllers/orderController.js)

    - `/api/company` — company auth/profile (controllers/companyControllers.js)

    - `/api/customers` — customer endpoints (controllers/customerControllers.js)

    - `/api/retailers` — retailer locations (controllers/retailerController.js)

    - `/api/partners` — partners

    - `/api/admin` — admin endpoints

    - `/api/contact` — contact form messages

    Use the route files to see exact endpoints and required params.

    ## Authentication

    - JWT-based. Tokens are signed with `JWT_SECRET`.

    - Auth middleware: `middleware/auth.js` — verifies tokens and attaches decoded user to `req`.

    - Protect routes by applying `authenticate` and `authorize` where required.

    Example header for protected routes:

    ```

    Authorization: Bearer <token>

    ```

    ## Models (high level)

    Look in `models/` for schemas:

    - Company, Customer, Admin

    - Product

    - Order (items, totalCost, status)

    - RetailLocation, Partner, ContactMessage

    ## Seeding & data import

    - `scripts/seedData.js` and `scripts/import-retailers.mjs` are available for seeding and importing retailer geocoded data. Inspect and run with Node as needed.

    ## Logging & debugging

    - Check server console for auth / JWT errors (invalid signature, expired).

    - Ensure `MONGODB_URI` is correct when you see connection errors.

    - Use Postman / curl to test endpoints. Inspect response status (401 for auth issues, 500 for server errors).

    Example: log in (company) and fetch order

    ```bash

    # login -> get token

    curl -X POST http://localhost:3001/api/company/login -H "Content-Type: application/json" -d '{"email":"...","password":"..."}'

    # fetch order

    curl http://localhost:3001/api/orders/<orderId> -H "Authorization: Bearer <token>"

    ```

    ## Troubleshooting

    - JsonWebTokenError: invalid signature — check `JWT_SECRET` consistency between token issuer and verifier.

    - 401 Unauthorized — ensure token is present and not expired.

    - CORS issues — check server CORS settings and client origin.

    - 500 Server Error — check server console for stack trace and controller errors.

    ## Deployment

    - Set env variables on your host (PORT, MONGODB_URI, JWT_SECRET).

    - Use a process manager (pm2) or containerize with Docker.

    - Ensure proper CORS and HTTPS handling in production.

    ## Contributing

    - Follow the existing project structure: routes → controllers → models → services.

    - Keep controllers focused and move reusable logic to `services/`.

    ## Contacts

    - Repository owner / maintainer: see project-level README or repository meta.

backend/controllers/adminControllers.js

-Original file line number
+Diff line change
@@ -0,0 +1,94 @@
+    import bcrypt from 'bcryptjs'
+    import jwt from 'jsonwebtoken'
+    import Admin from '../models/Admin.js'
+    // Register a new admin
+    export const registerAdmin = async (req, res) => {
+      try {
+        const { name, email, password } = req.body
+        if (!password) {
+          return res.status(400).json({ error: 'Password is required' })
+        }
+        const hashedPassword = await bcrypt.hash(password, 10)
+        const admin = new Admin({
+          name: req.body.name,
+          email: req.body.email,
+          password: hashedPassword,
+          role: 'admin' // Set role explicitly
+        })
+        await admin.save()
+        res.status(201).json({ message: 'Admin registered!' })
+      } catch (error) {
+        res.status(400).json({ error: error.message })
+      }
+    }
+    // Login an admin
+    export const loginAdmin = async (req, res) => {
+      const { email, password } = req.body
+      const admin = await Admin.findOne({ email })
+      if (!admin) return res.status(401).json({ error: 'Invalid credentials' })
+      const valid = await bcrypt.compare(password, admin.password)
+      if (!valid) return res.status(401).json({ error: 'Invalid credentials' })
+      const token = jwt.sign({ adminId: admin._id }, process.env.JWT_SECRET, {
+        expiresIn: '1d'
+      })
+      res.json({ token, admin: { name: admin.name, email: admin.email } })
+    }
+    // Get all admins
+    export const getAllAdmins = async (req, res) => {
+      try {
+        const admins = await Admin.find()
+        res.json(admins)
+      } catch (error) {
+        res.status(500).json({ error: error.message })
+      }
+    }
+    // Get a single admin by ID
+    export const getAdminById = async (req, res) => {
+      try {
+        const admin = await Admin.findById(req.params.id)
+        if (!admin) return res.status(404).json({ error: 'Admin not found' })
+        res.json(admin)
+      } catch (error) {
+        res.status(500).json({ error: error.message })
+      }
+    }
+    // Update an admin's details
+    export const updateAdmin = async (req, res) => {
+      try {
+        const admin = await Admin.findByIdAndUpdate(req.params.id, req.body, {
+          new: true,
+          runValidators: true
+        })
+        if (!admin) return res.status(404).json({ error: 'Admin not found' })
+        res.json(admin)
+      } catch (error) {
+        res.status(400).json({ error: error.message })
+      }
+    }
+    // Delete an admin
+    export const deleteAdmin = async (req, res) => {
+      try {
+        const admin = await Admin.findByIdAndDelete(req.params.id)
+        if (!admin) return res.status(404).json({ error: 'Admin not found' })
+        res.json({ message: 'Admin deleted successfully' })
+      } catch (error) {
+        res.status(500).json({ error: error.message })
+      }
+    }
+    // Middleware to check if the user is an admin
+    export const isAdmin = (req, res, next) => {
+      if (req.user.role !== 'admin') {
+        return res.status(403).json({ error: 'Forbidden' })
+      }
+      next()
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Linda & Bianka | PR #114

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Linda & Bianka | PR #114

Are you sure you want to change the base?

Uh oh!

Linda & Bianka | PR #114

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!