🚀 TrackIt - Career Learning & Roadmap Platform

A modern, full-stack educational platform for career development and skill tracking

TrackIt is a comprehensive educational platform that empowers professionals and students to navigate their career paths effectively. Built with modern web technologies, it offers curated learning roadmaps, interactive courses, and personalized recommendations to streamline the journey from beginner to expert.

Live Demo: [Coming Soon]
Documentation: Wiki

📸 Screenshots

Click to view screenshots

Screenshots and demo GIFs will be added here

✨ Key Features

Core Functionality

🗺️ Interactive Roadmaps: Visual, node-based guides for career paths including Web Development, OSINT (Open Source Intelligence), and more
📚 Course Catalog: Comprehensive library of structured courses with:
- Difficulty level indicators (Beginner, Intermediate, Advanced)
- Duration estimates and time commitments
- Instructor profiles and credentials
- Prerequisites and learning outcomes
🎯 Career Recommendations: Intelligent suggestion engine to guide users toward their next learning milestone
🔍 Global Search: Fast, full-text search across courses, roadmaps, and resources

User Management

🔐 Secure Authentication: Complete user management system with:
- User registration and login
- Password reset with email verification
- Multi-factor authentication support
- Session management
👤 User Profiles: Personalized dashboards featuring:
- Progress tracking and analytics
- Course completion history
- Saved roadmaps and bookmarks
- Account settings management

Commerce

💳 Integrated Checkout: Secure payment processing for premium content via PayPal integration

🏗️ Architecture Overview

TrackIt follows a modern, decoupled architecture pattern:

┌─────────────────────────────────────────────────────────┐
│                      Frontend (React)                    │
│  • Vite Build Tool                                       │
│  • React Router for SPA Navigation                       │
│  • TanStack Query for Server State                       │
│  • Shadcn/UI + Tailwind CSS for Styling                  │
└──────────────────┬──────────────────────────────────────┘
                   │
                   │ REST API
                   │
┌──────────────────▼──────────────────────────────────────┐
│                  Backend (Express.js)                    │
│  • RESTful API Endpoints                                 │
│  • JWT Authentication                                    │
│  • Mongoose ODM                                          │
└──────────────────┬──────────────────────────────────────┘
                   │
                   │ MongoDB Driver
                   │
┌──────────────────▼──────────────────────────────────────┐
│                  Database (MongoDB)                      │
│  • User Collections                                      │
│  • Course & Roadmap Data                                 │
│  • Session Storage                                       │
└─────────────────────────────────────────────────────────┘

🛠️ Tech Stack

Frontend

Framework: React 18.3.1 with TypeScript
Build Tool: Vite 5.4.1 for fast HMR and optimized builds
Styling:
- Tailwind CSS 3.4.11 for utility-first styling
- Shadcn/UI component library
- Radix UI primitives
State Management:
- TanStack Query v5 for server state
- React Hook Form for form state
Routing: React Router Dom v6
Icons: Lucide React
Form Validation: Zod schemas

Backend

Runtime: Node.js (v18+) / Bun
Framework: Express.js 4.x
Database: MongoDB with Mongoose ODM
Authentication: JWT-based authentication
Middleware:
- CORS for cross-origin requests
- Express JSON parser
- Custom error handling

Development Tools

Package Manager: npm / bun
Linting: ESLint with TypeScript support
Version Control: Git & GitHub

📂 Project Structure

web-backend-bridge/
├── client/                 # Legacy React frontend (CRA)
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── Style/          # CSS and styling files
│   │   └── App.js          # Main routing logic
│   └── package.json
│
├── server/                 # Express.js backend
│   ├── models/             # Mongoose schemas (User, Course, etc.)
│   ├── routes/             # API endpoint definitions
│   │   └── userRoutes.js   # User authentication & management
│   ├── DB/                 # Database connection configuration
│   ├── server.js           # Entry point
│   └── package.json
│
├── src/                    # Main Vite/React application (TypeScript)
│   ├── components/         # Shadcn/UI components
│   │   └── ui/             # Base UI components
│   ├── pages/              # Route page components
│   │   ├── Index.tsx       # Landing page
│   │   └── NotFound.tsx    # 404 page
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Utility functions and helpers
│   ├── App.tsx             # Main app component
│   └── main.tsx            # Vite entry point
│
├── public/                 # Static assets
├── vite.config.ts          # Vite configuration
├── tailwind.config.ts      # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
├── package.json            # Root workspace configuration
└── README.md               # Project documentation

🚀 Getting Started

Prerequisites

Ensure you have the following installed on your system:

Node.js (v18 or higher) - Download
npm (comes with Node.js) or bun (optional) - Download Bun
MongoDB account (MongoDB Atlas recommended) - Sign Up
Git - Download

Installation

1. Clone the Repository

git clone https://github.com/MADARA-AI/web-backend-bridge.git
cd web-backend-bridge

2. Setup the Backend Server

cd server
npm install

Create a .env file in the server directory:

# Server Configuration
PORT=5000

# Database
DB=mongodb+srv://username:password@cluster.mongodb.net/trackit?retryWrites=true&w=majority

# Authentication (Optional - if JWT is implemented)
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRE=7d

# Email Service (Optional - for password reset)
EMAIL_SERVICE=gmail
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-email-password

Start the backend server:

npm start
# Server will run on http://localhost:5000

3. Setup the Frontend Application

Open a new terminal window:

cd web-backend-bridge  # Go back to root
npm install

Start the development server:

npm run dev
# Application will run on http://localhost:5173

4. (Optional) Setup Legacy Client

If you want to run the legacy client:

cd client
npm install
npm start
# Legacy client will run on http://localhost:3000

Quick Start with Bun

If you have Bun installed, you can use it for faster dependency installation:

# Install dependencies with Bun
bun install

# Run development server
bun run dev

🔧 Configuration

Environment Variables

Backend Server (`server/.env`)

Variable	Description	Required	Default
`PORT`	Port the server runs on	No	`5000`
`DB`	MongoDB Connection String	Yes	-
`JWT_SECRET`	Secret key for JWT tokens	Recommended	-
`JWT_EXPIRE`	JWT expiration time	No	`7d`
`EMAIL_SERVICE`	Email service provider	No	-
`EMAIL_USER`	Email account username	No	-
`EMAIL_PASS`	Email account password	No	-

Frontend Application

The frontend uses Vite environment variables. Create a .env file in the root directory:

# API Configuration
VITE_API_URL=http://localhost:5000

# Feature Flags
VITE_ENABLE_ANALYTICS=false

📡 API Documentation

Base URL

http://localhost:5000

Endpoints

Authentication

POST /api/users/register
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "securePassword123"
}

POST /api/users/login
Content-Type: application/json

{
  "email": "john@example.com",
  "password": "securePassword123"
}

User Management

GET /api/users/profile
Authorization: Bearer {token}

PUT /api/users/profile
Authorization: Bearer {token}
Content-Type: application/json

{
  "name": "John Updated",
  "bio": "Full-stack developer"
}

📚 For complete API documentation, visit the API Wiki

🧪 Testing

Running Tests

# Run all tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch

Test Structure

server/
└── __tests__/
    ├── unit/
    │   ├── models/
    │   └── utils/
    └── integration/
        └── routes/

🚢 Deployment

Backend Deployment (Heroku Example)

# Install Heroku CLI
npm install -g heroku

# Login to Heroku
heroku login

# Create a new Heroku app
cd server
heroku create trackit-backend

# Set environment variables
heroku config:set DB=your_mongodb_connection_string
heroku config:set JWT_SECRET=your_secret

# Deploy
git push heroku main

Frontend Deployment (Vercel Example)

# Install Vercel CLI
npm install -g vercel

# Deploy
cd web-backend-bridge
vercel

# Set environment variables in Vercel dashboard
# VITE_API_URL=https://your-backend-url.herokuapp.com

Alternative Deployment Options

Frontend: Netlify, Vercel, GitHub Pages, Cloudflare Pages
Backend: Heroku, Railway, Render, AWS EC2, DigitalOcean
Database: MongoDB Atlas (recommended), AWS DocumentDB

🧑‍💻 Development

Available Scripts

Root Directory

npm run dev          # Start Vite development server
npm run build        # Build for production
npm run build:dev    # Build in development mode
npm run preview      # Preview production build
npm run lint         # Run ESLint

Server Directory

npm start            # Start Express server
npm run dev          # Start with nodemon (auto-reload)
npm test             # Run tests

Code Style

This project uses ESLint for code quality. Configuration is in eslint.config.js.

# Check for linting errors
npm run lint

# Auto-fix linting errors
npm run lint -- --fix

Git Workflow

Create a feature branch: git checkout -b feature/amazing-feature
Make your changes and commit: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

How to Contribute

Fork the Repository
- Click the "Fork" button at the top right of this page

Clone Your Fork

git clone https://github.com/your-username/web-backend-bridge.git
cd web-backend-bridge

Create a Feature Branch

git checkout -b feature/your-amazing-feature

Make Your Changes
- Write clear, commented code
- Follow the existing code style
- Add tests if applicable
Commit Your Changes
```
git add .
git commit -m 'feat: add amazing feature'
```
Use Conventional Commits format:
- feat: for new features
- fix: for bug fixes
- docs: for documentation changes
- style: for formatting changes
- refactor: for code refactoring
- test: for adding tests
- chore: for maintenance tasks

Push to Your Fork

git push origin feature/your-amazing-feature

Open a Pull Request
- Go to the original repository
- Click "New Pull Request"
- Select your feature branch
- Fill out the PR template
- Wait for review

Development Guidelines

Code Quality: Ensure your code passes all linting checks
Testing: Add tests for new features
Documentation: Update documentation for any API changes
Commit Messages: Use clear, descriptive commit messages
Pull Requests: Keep PRs focused and small

Reporting Bugs

Found a bug? Please open an issue with:

A clear title and description
Steps to reproduce
Expected vs actual behavior
Screenshots (if applicable)
Your environment (OS, Node version, etc.)

📋 Roadmap

🐛 Known Issues

Legacy client (CRA) is deprecated in favor of the new Vite application
Some API endpoints may need authentication middleware updates
Email service configuration is currently optional

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

ISC License

Copyright (c) 2024 MADARA-AI

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

👥 Authors & Acknowledgments

Core Team

MADARA-AI - Lead Developer & Project Maintainer

GitHub: @MADARA-AI
Email: [Available on request]

Acknowledgments

Built with React and Express.js
UI components from Shadcn/UI
Icons from Lucide
Inspired by Roadmap.sh and other learning platforms

Contributors

Thanks to all contributors who have helped improve this project!

📞 Support & Contact

Issues: GitHub Issues
Discussions: GitHub Discussions
Documentation: Wiki

⭐ Show Your Support

If you find this project helpful, please consider giving it a star on GitHub! It helps others discover the project and motivates further development.

📊 Project Stats

Built with ❤️ by MADARA-AI

Empowering learners to achieve their career goals through structured, accessible education

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.github		.github
client		client
public		public
server		server
src		src
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
CV_HIGHLIGHTS.md		CV_HIGHLIGHTS.md
LICENSE		LICENSE
README.md		README.md
REPOSITORY_IMPROVEMENTS.md		REPOSITORY_IMPROVEMENTS.md
REPOSITORY_NAME.md		REPOSITORY_NAME.md
bun.lockb		bun.lockb
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

License

MADARA-AI/Track-it

Folders and files

Latest commit

History

Repository files navigation

🚀 TrackIt - Career Learning & Roadmap Platform

📸 Screenshots

✨ Key Features

Core Functionality

User Management

Commerce

🏗️ Architecture Overview

🛠️ Tech Stack

Frontend

Backend

Development Tools

📂 Project Structure

🚀 Getting Started

Prerequisites

Installation

1. Clone the Repository

2. Setup the Backend Server

3. Setup the Frontend Application

4. (Optional) Setup Legacy Client

Quick Start with Bun

🔧 Configuration

Environment Variables

Backend Server (server/.env)

Frontend Application

📡 API Documentation

Base URL

Endpoints

Authentication

User Management

🧪 Testing

Running Tests

Test Structure

🚢 Deployment

Backend Deployment (Heroku Example)

Frontend Deployment (Vercel Example)

Alternative Deployment Options

🧑‍💻 Development

Available Scripts

Root Directory

Server Directory

Code Style

Git Workflow

🤝 Contributing

How to Contribute

Development Guidelines

Reporting Bugs

📋 Roadmap

🐛 Known Issues

📄 License

👥 Authors & Acknowledgments

Core Team

Acknowledgments

Contributors

📞 Support & Contact

⭐ Show Your Support

📊 Project Stats

About

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Uh oh!

Languages

Backend Server (`server/.env`)

Packages