Skip to content

serger777/sportbase

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
sportbase-client
sportbase-client
 
 
sportbase-server
sportbase-server
 
 
.gitignore
.gitignore
 
 
.npmrc
.npmrc
 
 
README.md
README.md
 
 
netlify.toml
netlify.toml
 
 
render.yaml
render.yaml
 
 

Repository files navigation

SportBase

Full-stack fitness tracking platform built with modern web technologies and Feature-Sliced Design architecture

📋 Table of Contents

🎯 Overview

SportBase is a comprehensive fitness tracking application that allows users to:

  • Track and analyze their athletic activities
  • Monitor progress with detailed statistics and charts
  • Manage user profiles and settings
  • Admin panel for system management
  • OAuth integration with Google
  • Real-time application status monitoring

🏗 Architecture

The project follows Feature-Sliced Design (FSD) methodology for scalable and maintainable code organization.

FSD Layers

src/
├── app/                 # Application initialization & providers
├── app-pages/          # Page components (business logic)
├── widgets/            # Composite UI blocks
├── features/           # User interactions & business features
├── entities/           # Business entities
└── shared/             # Reusable resources

Key Principles

  • Named exports throughout the codebase (no default exports)
  • Path aliases for clean imports (@/shared, @/features, etc.)
  • Separation of concerns with clear layer boundaries
  • Type safety with TypeScript
  • State management with Zustand stores

🛠 Technology Stack

Frontend (sportbase-client)

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • UI Library: React 18
  • Styling: Tailwind CSS
  • State Management: Zustand
  • Data Fetching: Apollo Client (GraphQL)
  • Forms: React Hook Form + Yup validation
  • Date/Time: Moment.js
  • Code Quality: ESLint, Prettier, Husky
  • UI Components: Flowbite-inspired design system

Backend (sportbase-server)

  • Framework: NestJS
  • Language: TypeScript
  • API: REST + GraphQL
  • Database: MongoDB with Mongoose ODM
  • Authentication: JWT + Google OAuth 2.0
  • Password Hashing: BcryptJS
  • Utilities: Lodash
  • Deployment: Kubernetes + AWS
  • Code Quality: Husky pre-commit hooks

📁 Project Structure

sportbase/
├── sportbase-client/          # Frontend application
│   ├── app/                   # Next.js App Router pages
│   │   ├── (guest)/          # Guest routes (landing, login)
│   │   ├── admin/            # Admin panel routes
│   │   ├── auth/             # Authentication routes
│   │   ├── activity/         # Activity tracking
│   │   ├── home/             # User dashboard
│   │   ├── profile/          # User profile
│   │   ├── progress/         # Progress analytics
│   │   ├── settings/         # User settings
│   │   └── user/             # User management
│   │
│   ├── src/                   # FSD structure
│   │   ├── app/              # App layer
│   │   │   ├── providers/    # React providers (Apollo, Auth)
│   │   │   └── styles/       # Global styles
│   │   │
│   │   ├── app-pages/        # Pages layer
│   │   │   ├── activity/     # Activity page logic
│   │   │   ├── admin-apps/   # Admin apps management
│   │   │   ├── admin-users/  # Admin users management
│   │   │   ├── admin-app-issues/  # Admin issues
│   │   │   ├── app-home/     # Home page logic
│   │   │   ├── landing/      # Landing page
│   │   │   ├── profile/      # Profile page
│   │   │   ├── progress/     # Progress analytics
│   │   │   └── user/         # User page
│   │   │
│   │   ├── widgets/          # Widgets layer
│   │   │   ├── latest-monthly-activity/  # Activity widget
│   │   │   ├── layout-header/            # Header component
│   │   │   └── user-menu/                # User dropdown menu
│   │   │
│   │   ├── features/         # Features layer
│   │   │   ├── admin-apps/              # Admin apps management
│   │   │   ├── admin-users/             # Admin users management
│   │   │   ├── admin-app-issues/        # Admin issues management
│   │   │   ├── app-issues/              # User app issues
│   │   │   ├── app-management/          # App CRUD operations
│   │   │   ├── auth/                    # Authentication
│   │   │   │   ├── login/               # Login feature
│   │   │   │   ├── register/            # Registration
│   │   │   │   └── permission/          # Access control
│   │   │   └── user-profile/            # Profile management
│   │   │
│   │   ├── entities/         # Entities layer
│   │   │   ├── activity/     # Activity entity
│   │   │   ├── app/          # Application entity
│   │   │   └── user/         # User entity
│   │   │
│   │   └── shared/           # Shared layer
│   │       ├── ui/           # UI components
│   │       │   ├── Badge/
│   │       │   ├── Button/
│   │       │   ├── Dropdown/
│   │       │   ├── Heading/
│   │       │   ├── Input/
│   │       │   ├── Message/     # Toast notifications
│   │       │   ├── Sidepanel/   # Side panels
│   │       │   └── Spinner/
│   │       ├── lib/          # Utilities & helpers
│   │       │   ├── apollo/       # GraphQL client
│   │       │   ├── hooks/        # Custom hooks
│   │       │   ├── message/      # Message system
│   │       │   ├── sidepanel/    # Sidepanel system
│   │       │   └── utils/        # Helper functions
│   │       └── types/        # Shared TypeScript types
│   │
│   ├── public/               # Static assets
│   ├── .env                  # Environment variables
│   ├── tsconfig.json         # TypeScript config with path aliases
│   ├── tailwind.config.ts    # Tailwind configuration
│   └── package.json
│
└── sportbase-server/         # Backend application
    ├── src/
    │   ├── modules/          # Feature modules
    │   ├── common/           # Shared utilities
    │   └── main.ts           # Application entry
    ├── .env                  # Environment variables
    └── package.json

🚀 Getting Started

Prerequisites

  • Node.js 18+ and npm
  • Docker (for MongoDB)
  • MongoDB Compass (recommended)

Installation

  1. Clone the repository
git clone <repository-url>
cd sportbase
  1. Setup Database
# Pull MongoDB Docker image
docker pull mongo

# Run MongoDB container
docker run -d --name mongodb \
  -p 27017:27017 \
  -e MONGO_INITDB_ROOT_USERNAME=root \
  -e MONGO_INITDB_ROOT_PASSWORD=root \
  mongo:latest
  1. Setup Backend
cd sportbase-server
npm install

# Create .env file
cat > .env << EOF
MONGO_CONNECTION_STRING=mongodb://root:root@localhost:27017/sportbase?authSource=admin
JWT_SECRET=your-jwt-secret-key
GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-google-client-secret
CLIENT_ORIGIN=http://localhost:3500
GOOGLE_CALLBACK_URL=http://localhost:2500/auth/google/redirect
EOF

# Start server (port 2500)
npm run start:dev
  1. Setup Frontend
cd ../sportbase-client
npm install

# Create .env file
cat > .env << EOF
NEXT_PUBLIC_SERVER_ORIGIN=http://localhost:2500
NEXT_PUBLIC_CLIENT_ORIGIN=http://localhost:3500
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
CLIENT_ORIGIN=http://localhost:3500
EOF

# Start development server (port 3500)
npm run dev
  1. Access the application

💻 Development

Frontend Commands

# Development server
npm run dev

# Production build
npm run build

# Start production server
npm start

# Code formatting
npm run format

# Linting
npm run lint

# Type checking
npm run typecheck

Code Quality

The project uses:

  • Husky for pre-commit hooks
  • Prettier for code formatting
  • ESLint for linting (includes Tailwind CSS plugin)
  • TypeScript for type checking

All commits are automatically checked for:

  • Code formatting
  • Linting errors
  • Type errors

Path Aliases

import { Button } from '@/shared/ui/Button';
import { useAuthStore } from '@/features/auth';
import { ActivityCard } from '@/entities/activity';
import { Header } from '@/widgets/layout-header';
import { ActivityPage } from '@/app-pages/activity';

🔐 Environment Variables

Frontend (.env)

NEXT_PUBLIC_SERVER_ORIGIN=http://localhost:2500
NEXT_PUBLIC_CLIENT_ORIGIN=http://localhost:3500
NEXT_PUBLIC_GOOGLE_CLIENT_ID=<your-client-id>.apps.googleusercontent.com
CLIENT_ORIGIN=http://localhost:3500

Backend (.env)

MONGO_CONNECTION_STRING=mongodb://root:root@localhost:27017/sportbase?authSource=admin
JWT_SECRET=your-jwt-secret-key
GOOGLE_CLIENT_ID=<your-client-id>.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=<your-client-secret>
CLIENT_ORIGIN=http://localhost:3500
GOOGLE_CALLBACK_URL=http://localhost:2500/auth/google/redirect

✨ Features

User Features

  • Authentication: Email/password and Google OAuth
  • Activity Tracking: Log and manage fitness activities
  • Progress Analytics: Visualize progress with charts and statistics
  • Profile Management: Update user information and settings
  • Application Management: Create and manage personal applications

Admin Features

  • User Management: View and edit user roles
  • Application Monitoring: Monitor all applications and their status
  • Issue Tracking: View and manage user-reported issues
  • Real-time Updates: SSE-based status updates

Technical Features

  • Responsive Design: Mobile-first approach with Tailwind CSS
  • Type Safety: Full TypeScript coverage
  • State Management: Zustand stores with immutable updates
  • Real-time Updates: Server-Sent Events (SSE)
  • Form Validation: React Hook Form + Yup schemas
  • GraphQL Integration: Apollo Client for efficient data fetching
  • Permission System: Role-based access control
  • Toast Notifications: User feedback system
  • Side Panels: Dynamic UI panels for forms

🎨 Design System

The application uses a custom design system based on Tailwind CSS with:

  • Color Palette: Primary (blue), Secondary (gray), Success (green), Error (red)
  • Typography: System font stack with responsive sizing
  • Components: Buttons, Badges, Inputs, Dropdowns, Spinners, etc.
  • Layouts: Container, Grid, Flex utilities
  • Responsive: Mobile-first breakpoints (sm, md, lg, xl, 2xl)

🧪 Testing

# Frontend
npm run typecheck  # TypeScript validation

# Backend
npm run test       # Unit tests
npm run test:e2e   # E2E tests

📦 Building for Production

Frontend

npm run build
npm start

Backend

npm run build
npm run start:prod

🤝 Contributing

  1. Follow the FSD architecture principles
  2. Use named exports (no default exports)
  3. Write type-safe TypeScript code
  4. Follow the existing code style (enforced by Prettier/ESLint)
  5. Update documentation for new features
  6. Test your changes before committing

Commit Convention

feat: add new feature
fix: bug fix
refactor: code refactoring
docs: documentation updates
style: formatting changes
test: add tests
chore: maintenance tasks

📝 License

[Add your license here]

👥 Team

[Add team information here]

🔗 Links

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages