A beautiful, modern web application to track and visualize your learning journey and career development goals. Built with React 18, TypeScript, and Material-UI (MUI) v5.
- Visual Progress Tracking: Interactive circular progress indicators for all your learning goals
- Hierarchical Goals: Organize your career path with main goals and sub-goals
- Modern UI/UX: Beautiful gradient backgrounds, smooth animations, and hover effects
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Type-Safe: Built with TypeScript for better code quality and developer experience
- Fast & Optimized: Utilizes React 18's latest features and performance optimizations
Visit the live application: https://my-path.vercel.app/
- React 18.3.1 - Modern React with concurrent features
- TypeScript 5.4.5 - Type-safe JavaScript
- Material-UI (MUI) v5.15 - Modern React component library
- React Router v6 - Client-side routing
- Emotion - CSS-in-JS styling solution
- Create React App - Tooling and build configuration
Before you begin, ensure you have the following installed:
Node.js >= 16.x
yarn >= 1.22.x (or npm >= 8.x)- Clone the repository
git clone git@github.com:nasarcacd/my-path.git
cd my-path- Install dependencies
yarn install
# or
npm install- Start the development server
yarn start
# or
npm startThe app will open at http://localhost:3000
Runs the app in development mode with hot-reloading
Builds the app for production to the build folder
Launches the test runner in interactive watch mode
Note: this is a one-way operation. Once you eject, you can't go back!
- Color-coded progress indicators (green for >75%, blue for >50%, orange for <50%)
- Large main progress circle showing overall career path completion
- Individual cards for each skill/technology goal
- Click on any goal card to view detailed sub-goals
- Smooth page transitions with React Router v6
- Back navigation to return to previous views
- Gradient backgrounds with purple-blue theme
- Card-based layouts with hover animations
- Responsive grid system that adapts to screen size
- Drop shadows and depth effects for visual hierarchy
- Mobile: < 600px (xs)
- Tablet: 600px - 960px (sm, md)
- Desktop: > 960px (lg, xl)
- Install Vercel CLI:
npm i -g vercel- Deploy:
vercel- Build the project:
yarn build- Deploy the
buildfolder to your hosting service of choice
my-path/
├── public/ # Static files
├── src/
│ ├── components/ # Reusable components
│ │ ├── circular-static-progress/
│ │ └── ui/
│ ├── containers/ # State containers
│ ├── pages/ # Page components
│ │ ├── homepage/
│ │ ├── goal-detail/
│ │ └── contact/
│ ├── utils/ # Utility functions
│ ├── App.tsx # Main app component
│ └── index.tsx # Entry point
├── package.json
└── tsconfig.json
- ⬆️ Updated React from v16 to v18
- ⬆️ Migrated from Material-UI v4 to MUI v5
- ⬆️ Updated React Router from v5 to v6
- ⬆️ Updated TypeScript from 3.7 to 5.4
- 🎨 Complete UI/UX redesign with modern aesthetics
- ✨ Added smooth animations and hover effects
- 📱 Improved responsive design
- 🎯 Better progress visualization with color coding
Contributions, issues, and feature requests are welcome!
This project is open source and available under the MIT License.
Nayib
- GitHub: @nasarcacd
- Material-UI team for the amazing component library
- React team for the incredible framework
- All contributors and users of this project
Note: This application is designed for personal career tracking and goal management. Feel free to fork and customize it for your own needs!