Project Website Frontend

My portfolio website frontend, built with React and TypeScript, and styled using styled-components and TailwindCSS. I designed it to be modern, responsive, and highly interactive, showcasing my portfolio of projects, developer tools, and real-time statistics.

Features

• Project Showcase: Interactive cards display detailed information about each project, including technologies used, live demos, and GitHub links.
• Live Code Statistics: The total lines of code across all major projects are displayed, updated automatically via backend scripts using tokei.
• Real-Time Tools: Integrations for DevPanel, Messaging, and URL Shortener, each with their own dedicated pages.
• Responsive Design: Fully responsive layout for desktop, tablet, and mobile devices.
• Dark/Light Theme Support: Easily switch between themes using the navigation bar.
• Smooth Animations: Uses framer-motion for smooth transitions and interactive UI elements.
• Performance Optimizations: Custom hooks and best practices for fast, efficient rendering.

Project Structure

• src/pages/Projects/index.tsx — Main projects page, including the code stats feature and project cards.
• src/components/ — Reusable UI components (NavigationBar, Footer, Layout, etc.).
• src/contexts/ThemeContext.tsx — Theme provider and context for dark/light mode.
• src/styles/ — Global styles and theme definitions.
• src/types/ — Custom TypeScript type declarations
• src/assets/data/code_stats.json — Auto-generated file with up-to-date lines of code stats (do not edit manually).

How the Codebase Works

• Frontend:

  • Built with Create React App and TypeScript.
  • Uses styled-components for theming and custom styles.
  • Animations and transitions are handled by framer-motion.
  • Project and code stats data are fetched from static JSON files generated by backend scripts.

• Lines of Code Stats:

  • A backend shell script runs tokei on all major project directories.
  • The script outputs a code_stats.json file in the src/assets/data/ directory.
  • The frontend fetches this file on the Projects page and displays the total lines of code.
  • The script is run on server startup and every hour via a cron job to keep stats up to date.

• WebSocket/Real-Time Features:

  • Some pages (e.g., DevPanel, Messaging) may attempt to connect to backend WebSocket endpoints for real-time updates. If the backend is not running or accessible, you may see connection errors in the browser console (these do not affect the main site functionality).

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

   Open http://localhost:3000 to view it in the browser.

   For a fresh start (recommended if experiencing cache issues):

   npm run dev:fresh

3. Build for production:

   npm run build

Deployment

• I've configured the app ready for deployment as a static site after running npm run build.
• Ensure the backend script is configured to update src/assets/data/code_stats.json regularly for live code stats.

Key Technologies

• React 18
• TypeScript
• styled-components
• framer-motion
• TailwindCSS
• react-icons
• Create React App
• CRACO (Create React App Configuration Override)

Troubleshooting

Browser Cache Issues in Development

If you're experiencing issues where code changes aren't reflected in the browser:

1. Use the fresh start command:

   npm run dev:fresh

   This clears all caches before starting the development server.

2. Manually clear caches:

   npm run clear-cache

3. In the browser console (development mode only):

   window.__clearAllCaches()

4. Hard refresh the browser:

   • Windows/Linux: Ctrl + Shift + R
   • Mac: Cmd + Shift + R

5. Check for service workers:

   • Open DevTools → Application → Service Workers
   • Unregister any service workers for localhost

Development Configuration

The project uses CRACO to customize the webpack configuration without ejecting from Create React App. Key configurations:

• Cache busting headers are automatically set in development
• Service workers are automatically unregistered on startup
• Hot Module Replacement (HMR) is configured for instant updates
• Development environment variables are in .env.development

Available Scripts

• npm start - Start development server (uses CRACO)
• npm run build - Create production build (uses CRACO)
• npm test - Run tests (uses CRACO)
• npm run clear-cache - Clear all development caches
• npm run dev:fresh - Clear caches and start fresh
• npm run lint - Run ESLint
• npm run lint:fix - Auto-fix linting issues
• npm run format - Format code with Prettier
• npm run type-check - Check TypeScript types

Contributing

Pull requests and issues are welcome! Please follow best practices for code style and documentation.

License

This project is licensed under the MIT License.