Developers Roadmap Application
Interactive roadmap for developers with guided learning paths and progress tracking, built with React, Vite, TypeScript, and Tailwind CSS.
Developer's-Roadmap-Application š
Interactive Developer's Roadmap:
A comprehensive, frontend-only application that visually guides developers through learning paths in Frontend, Backend, DevOps, and more. Built with React and ShadCN UI.
Table of Contents š
Live Demo š
Check out the live demo here:
š[ Live Demo on Vercel ]
š Features
Click to expand key features
Interactive Roadmap Cards š
- Expand/collapse learning paths
- Progress tracking indicators
- Resource links embedded in cards
Theme System š
- Instant dark/light mode toggle
- System preference detections
- Smooth transition animations
Enhanced UX š
- Instant search filtering
- Mobile-first responsive design
- Keyboard navigation support
Tech Stack š»
- React + TypeScript
- ShadCN UI components
- CSS Variables for theming
š® Interactive Preview
Click to see roadmap interaction demo
Replace with your actual demo GIF
Interaction Guide
- Click cards to expand/collapse
- Drag to scroll horizontally
- Type in search bar to filter
- Click sun/moon to toggle theme
š¦ Getting Started
Installation š¦
# Clone repository
echo "Cloning the repository..."
git clone https://github.com/priyansh-69/Developers-Roadmap-Application.git
# Navigate to directory
echo "Navigating to project directory..."
cd Developers-Roadmap-Application
# Install dependencies
echo "Installing dependencies..."
npm install
Running Locally š»
echo "Starting development server..."
npm start
Alternative commands (Yarn)
echo "Installing dependencies using Yarn..."
yarn
echo "Starting server using Yarn..."
yarn start
š Project Structure
Click to view directory structure
āāā public/
ā āāā index.html
āāā src/
ā āāā assets/ # Media files
ā āāā components/ # Reusable components
ā āāā data/ # JSON data files
ā āāā styles/ # Global CSS
ā āāā App.tsx # Root component
ā āāā index.tsx # Entry point
āāā .gitignore
āāā package.json
āāā README.md
š¤ Contributing
Click to view contribution guidelines
Fork the repository
Create your feature branch:
echo "Creating new feature branch..."
git checkout -b feature/AmazingFeature
Commit changes:
echo "Committing changes..."
git commit -m 'Add some AmazingFeature'
Push to branch:
echo "Pushing to repository..."
git push origin feature/AmazingFeature
Open a Pull Request
š License
Distributed under the MIT License. See LICENSE for more information.
