Welcome to FeetCode, a competitive coding tracking application built with a modern, darker aesthetic and premium pixelated visual effects.
FeetCode is a web application designed to gamify competitive programming. It allows users to:
- Link their Codeforces accounts.
- Create and join challenges with friends.
- Track progress and compete for "coins" (tokens).
- Visualize submission heatmaps.
The project features a unique "liquid glass" UI style, pixelated fonts (VT323), and interactive background effects like the fluid splash cursor.
- Framework: Next.js 14+ (App Router)
- Language: TypeScript
- Styling: Tailwind CSS, Vanilla CSS (for custom effects)
- Authentication: Firebase Auth
- Backend: Express.js (proxy for Codeforces API and game logic)
- Database: MongoDB (via Mongoose)
- Animations: Framer Motion, HTML5 Canvas (Splash Cursor, Fuzzy Text)
- Node.js (v18 or higher)
- MongoDB instance (local or Atlas)
- Firebase project (for authentication)
- Clone the repository (if applicable).
- Install Client Dependencies:
cd client npm install - Install Server Dependencies:
cd server npm install
-
Start the Backend Server: Navigate to the
serverdirectory and run:npm run dev # or node index.jsEnsure your MongoDB URI is correctly set in
.env(or default local). -
Start the Frontend Client: Navigate to the
clientdirectory and run:npm run dev
The application will be available at
http://localhost:3000.
- Splash Cursor: A fluid simulation background that reacts to mouse movement.
- Fuzzy Text: A dynamic, glitch-like text effect for headers.
- Liquid Glass: modern, translucent button styles.
- Responsive Design: Optimized for both desktop and mobile viewing with a dedicated mobile bottom navigation bar.
For a PDF version of this documentation or project details, you can print this page using your browser's "Print to PDF" feature. This README serves as the primary documentation source.