Helping college freshers navigate their tech journey with personalized learning paths
CodeKick is an interactive platform designed specifically for college freshers who are confused about which tech domain to pursue. Instead of overwhelming you with information, we guide you step-by-step through discovering your path in:
- 💻 Competitive Programming & DSA
- 🤖 Artificial Intelligence & Machine Learning
- 🌐 Web3 Development
- 🎨 Web2 Development
An engaging animated homepage with floating symbols of programming languages (C++, Python) and tech domains (AI/ML, Web3, CP/DSA) that immediately immerse you in the tech world.
Create your tech identity with:
- Coding platform handles (LeetCode, Codeforces, etc.)
- Social links (LinkedIn, Telegram for Web3 communities)
- Personal bio section
- Flip card interaction - Save your info and upload a profile picture on the flip side
Hover over domain cards to reveal:
- What the domain is about
- Advantages and disadvantages
- Potential salary insights
- Time to mastery estimates
- Choose your language: Java, C++, or Python
- Select proficiency level: Beginner, Intermediate, or Advanced
- Get curated resources based on your level:
- Beginner: YouTube tutorials and foundational concepts
- Intermediate: STL, Binary Search, Prefix Sums, Recursion & Backtracking
- Advanced: Bit Manipulation, Graph Algorithms (BFS/DFS), Sieve
- Progressive resource unlocking - complete one topic to unlock the next
Sequential learning path with "Done" buttons:
- Python Fundamentals
- Data Science Libraries (NumPy, Pandas, Matplotlib, Seaborn)
- Exploratory Data Analysis (EDA)
- Data Science Concepts
- Machine Learning Fundamentals
Structured progression:
- React fundamentals
- Web3 development basics
- Advanced Web3 concepts
- Daily CP Blogs: Platform tutorials, competitive programming news
- Research Papers Section: Daily AI/ML research paper updates
- Password-protected admin panel for content updates
| Technology | Purpose |
|---|---|
| React 18 | Component-based UI |
| TypeScript | Type-safe code |
| Vite | Fast development & builds |
| Framer Motion | Smooth animations |
| Lucide React | Beautiful icons |
| Tailwind CSS | Utility-first styling |
- Node.js (v18+)
- npm or yarn
# Clone the repository
git clone https://github.com/Failureguy94/codekick.git
# Navigate to directory
cd codekick
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:5173 to see the app running!
flowchart TD
A[Home Page] -->|Welcome Animation| B[Profile Creation]
B -->|Fill Bio Card| C[Upload Profile Picture]
C -->|Let's Upskill Button| D[Domain Selection]
D -->|Choose Domain| E{Select Domain}
E -->|CP/DSA| F[Language Selection]
E -->|AI/ML| G[5-Step Roadmap]
E -->|Web3| H[Web3 Learning Path]
E -->|Web2| I[Web2 Resources]
F --> J{Proficiency Level}
J -->|Beginner| K[Basic Resources]
J -->|Intermediate| L[STL, Binary Search, Recursion]
J -->|Advanced| M[Advanced Algorithms]
G --> N[Step 1: Python]
N -->|Done| O[Step 2: Libraries]
O -->|Done| P[Step 3: EDA]
P -->|Done| Q[Step 4: Data Science]
Q -->|Done| R[Step 5: ML]
style A fill:#61DAFB,stroke:#333,stroke-width:2px
style D fill:#FF6B6B,stroke:#333,stroke-width:2px
style E fill:#FFC107,stroke:#333,stroke-width:2px
graph LR
A[CodeKick] --> B[User Experience]
A --> C[Learning Paths]
A --> D[Admin Panel]
B --> E[Animated Home]
B --> F[Profile Card]
B --> G[Domain Cards]
C --> H[CP/DSA]
C --> I[AI/ML]
C --> J[Web3]
H --> K[Language Choice]
H --> L[Level-based Resources]
I --> M[5 Sequential Steps]
D --> N[Daily Blogs]
D --> O[Research Papers]
style A fill:#4ECDC4,stroke:#333,stroke-width:3px
style B fill:#45B7D1,stroke:#333,stroke-width:2px
style C fill:#96CEB4,stroke:#333,stroke-width:2px
style D fill:#FF6B6B,stroke:#333,stroke-width:2px
codekick/
├── src/
│ ├── components/
│ │ ├── Home/ # Welcome animation
│ │ ├── Profile/ # Bio card & flip card
│ │ ├── DomainSelection/ # Domain cards
│ │ ├── CP/ # CP/DSA learning paths
│ │ ├── AIML/ # 5-step ML roadmap
│ │ ├── Web3/ # Web3 resources
│ │ └── Admin/ # Admin dashboard
│ ├── pages/
│ ├── hooks/
│ ├── utils/
│ └── App.tsx
├── public/
├── package.json
└── vite.config.ts
- Start: Experience the animated welcome screen
- Create Profile: Fill in your coding handles and social links
- Choose Domain: Explore domains with interactive hover effects
- Select Track: Pick your language (for CP) or follow step-by-step path (for AI/ML)
- Learn: Access curated resources based on your level
- Progress: Unlock next resources as you complete previous ones
Access the admin panel to:
- Update daily CP news and tutorials
- Share latest AI/ML research papers
- Keep content fresh and relevant
- No Information Overload: Progressive disclosure of resources
- Interactive Design: Engaging animations and flip cards
- Personalized Journey: Tailored paths based on your choices
- Curated Content: Hand-picked resources for each level
- Clear Progression: Visual tracking of your learning journey
We welcome contributions! Here's how:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit changes (
git commit -m 'Add AmazingFeature') - Push to branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
Special thanks to all the educators and content creators whose resources make this platform possible.
Built with ❤️ for college freshers navigating their tech journey
Made by Failureguy94
⭐ Star this repo if it helps you!