techblitzdev/TechBlitz

Overview

TechBlitz is designed to empower developers by providing a comprehensive platform for learning, practicing, and improving technical skills. Unlike traditional coding platforms, we focus on holistic developer growth across various technologies and skill levels, without taking your hours to complete, as well as being a mobile-friendly platform. Complete coding challenges from any device, anywhere.

Features

• Personalized coding roadmaps: Personalized coding challenges generated through a series of onboarding questions to gauge your strengths and weaknesses.
• Coding questions: Repetition in the form of daily questions, and streaks to ensure you never miss a day!
• Skill Tracking: Monitor your progress and identify areas for improvement
• Leaderboard: Battle with other users for a chance to win prizes at the end of each month!
• Community-Driven: Open-source and community-powered platform
• Statistics: Analysis your current skillset, and be guided on how to improve.
• Game modes: Learn through fun, engaging game modes to help you keep coming back for more.

Roadmap

We love to be transparent with our users, so below are the next features we have planned.

• Roadmaps: Sharing roadmaps with other users
• TechBlitz for schools: Education groups, create your student's questions, roadmaps and allow them to battle with one another for the top spot of the class!
• Social: Profiles, friends/coworkers
• Statistics: A more in-depth statistics dashboard, giving you a greater insight on your current ability.
• Multi-language support: Currently we only support JavaScript. However, we are looking into: Python, Typescript, and GoLang for our first wave of other languages to support.
• Searching: Implement elastic search to easily find questions that you want to answer
• Slack bot: Daily challenges sent to a Slack channel of your choice. Compete with co-workers and learn new skills!

Tech stack

• Frameworks/libraries: React + Next.js (app router)
• Styling: Tailwind CSS
• UI Components: Shadcn, Aceternity, MagicUi
• Backend (auth, database, storage): Supabase
• Payments: Stripe
• Hosting: Vercel
• ORM: Prisma
• Data fetching: Tanstack Query
• Emails: Resend + React Email
• Short links: Dub
• Component Testing: StoryBook

Installation

1. Clone the repository

   git clone [email protected]:techblitzdev/TechBlitz.git
   

2. Install dependencies

   cd techblitz
   pnpm install
   

3. Run the development server

   pnpm run dev
   

Supabase Setup

Documentation for Supabase coming soon 🚀

Running StoryBook

StoryBook is used for component development and testing in isolation. Follow these steps to work with StoryBook:

1. Start the StoryBook development server:

   pnpm run storybook
   

2. Create story files for components:

   • Each component must have a [component-name].stories.tsx file in the same directory
   • Follow the naming convention: Button.stories.tsx for Button.tsx
   • Stories should showcase different states and variations of the component

3. Basic story file structure:

   import type { Meta, StoryObj } from '@storybook/react';
   import { ComponentName } from './ComponentName';
   
   const meta: Meta<typeof ComponentName> = {
     title: 'UI/ComponentName',
     component: ComponentName,
   };
   
   export default meta;
   type Story = StoryObj<typeof ComponentName>;
   
   export const Default: Story = {
     args: {
       // Component props
     },
   };
   

4. Best practices:

   • Include multiple stories for different component states
   • Add documentation using JSDoc comments
   • Test edge cases and error states
   • Use controls to make props interactive
   • Add accessibility tests where applicable

5. Build static StoryBook (for deployment):

   pnpm run build-storybook
   

Contributing

We welcome contributions! Please see our CONTRIBUTING.md for details.

Feedback

If you have any feedback, please reach out to us at [email protected]

Security

You can view our security policy here

License

Apache-2.0