Project Description

This project is a full-stack web application starter built with a React + Vite frontend and a Node.js + Express backend. It includes marketing pages, authentication flows, and a protected dashboard experience, plus reusable UI components. The backend exposes JWT-based auth and contact endpoints and currently uses an in-memory data store for rapid local testing.

Features

• Marketing site pages (Home, About, Features, Pricing, Contact)
• Auth flows (Login, Sign Up) with persisted session in local storage
• Protected dashboard routes with layout and navigation
• Dashboard modules: overview, projects, team, and settings
• Contact submission API (server-side) and health check endpoint
• JWT auth middleware with bcrypt password hashing

Tech Stack

• Frontend: React, React Router, Vite
• UI and Styling: Tailwind CSS, Radix UI, MUI (Material UI), Emotion
• Backend: Node.js, Express.js
• Database: In-memory store (server/db/sqlite.js) for local dev
• Authentication and Security: JWT (jsonwebtoken), password hashing (bcryptjs)
• API and Server Utilities: CORS, dotenv

Top-Level Folder Overview

• src/: Frontend application source code (pages, routes, context, and styles).
• server/: Backend API source code (server entry, routes, controllers, middleware, and db).
• guidelines/: Project guidelines and reference documentation.
• Root files (package.json, vite.config.ts, postcss.config.mjs, etc.): Build, tooling, and project configuration.

Project Structure

Frontend

src/
|-- app/
|   |-- components/
|   |   |-- figma/
|   |   |   `-- ImageWithFallback.tsx
|   |   |-- guards/
|   |   |   `-- ProtectedRoute.tsx
|   |   |-- layouts/
|   |   |   |-- DashboardLayout.tsx
|   |   |   |-- Footer.tsx
|   |   |   `-- Header.tsx
|   |   `-- ui/
|   |       |-- core/
|   |       |   |-- use-mobile.ts
|   |       |   `-- utils.ts
|   |       |-- data/
|   |       |-- feedback/
|   |       |-- form/
|   |       |-- layout/
|   |       |-- navigation/
|   |       `-- overlay/
|   |-- context/
|   |   `-- AuthContext.tsx
|   |-- pages/
|   |   |-- About.tsx
|   |   |-- Contact.tsx
|   |   |-- Features.tsx
|   |   |-- Home.tsx
|   |   |-- Login.tsx
|   |   |-- NotFound.tsx
|   |   |-- Pricing.tsx
|   |   |-- SignUp.tsx
|   |   `-- dashboard/
|   |       |-- Dashboard.tsx
|   |       |-- Projects.tsx
|   |       |-- Settings.tsx
|   |       `-- Team.tsx
|   |-- App.tsx
|   |-- Root.tsx
|   `-- routes.tsx
|-- styles/
|   |-- fonts.css
|   |-- index.css
|   |-- tailwind.css
|   `-- theme.css
`-- main.tsx

Backend

server/
|-- controllers/
|   |-- contactController.js
|   `-- userController.js
|-- db/
|   `-- sqlite.js
|-- middleware/
|   `-- auth.js
|-- models/
|   |-- Contact.js
|   `-- User.js
|-- routes/
|   |-- contactRoutes.js
|   `-- userRoutes.js
`-- server.js

API Endpoints

Base URL: http://localhost:5000/api

• POST /users/register — create a new account
• POST /users/login — sign in
• GET /users/me — get current user (protected)
• GET /users — list users (protected)
• POST /contact — submit contact form
• GET /contact — list contact submissions
• GET /health — health check

Running the Code

1. Install dependencies:

   npm install

2. Start the frontend dev server:

   npm run dev

3. Start the backend API server:

   npm run server

Environment Variables

Create a .env file in the project root (optional) and set:

PORT=5000
CLIENT_URL=http://localhost:5173
JWT_SECRET=your_secret_here
JWT_EXPIRE=7d

Author

Aldrian Loberiano

License

If you want to contribute, feel free to fork this repository, create a feature branch, and submit a pull request.