Devlog #1 — Building the First DevPath AI Dashboard

Welcome to the first development log for DevPath AI, a personalized learning-path generator for developers.

The goal of the project is to help users follow a structured learning plan based on their current experience level, interests, available learning time, and long-term goals.

First dashboard prototype

I started by building the first version of the Home dashboard using React and Tailwind CSS.

At this stage, the main goal was to establish the visual direction of the application and create the base layout before connecting real user data, authentication, and AI-generated learning paths.

The dashboard currently includes:

• A welcome message for the user
• A profile card with a name and experience level
• A daily learning streak section
• A placeholder for the next recommended lesson
• A dark UI with violet, green, and gray accents

At the moment, the displayed name and user level are hardcoded. In a future update, this information will be retrieved from the user profile stored in the backend.

Learning streak

One of the first features I wanted to include was a learning streak system.

The purpose of this feature is to motivate users to learn consistently by showing how many days in a row they have completed a lesson or learning task.

Lottie problem

Initially, I wanted to use Lottie animations for the streak component.

I imported the lottie-react package and planned to use JSON-based animations in the interface:

However, I encountered a problem with the Lottie package and its setup in the project. After a short research session, I decided to replace Lottie animations with simple GIF files.

Using GIFs was a faster and more reliable solution for the current stage of development.

It also allowed me to keep the component simple by using the standard HTML <img> element instead of adding extra animation configuration.

I may return to Lottie later, especially if I need more control over animations, such as pausing, changing animation speed, looping specific parts, or dynamically changing animation states.

Current progress

• Created the first Home dashboard layout
• Added a user profile card
• Added an experience-level badge
• Implemented a visual streak section
• Added GIF-based animations
• Created a placeholder for the next lesson
• Connect user data to the backend
• Implement authentication
• Add real streak calculations
• Build the learning-path generator
• Display AI-generated lesson recommendations

Next steps

The next milestone is to transform the static dashboard into a functional user panel.

The planned tasks are:

1. Create onboarding questions for new users
2. Let users select their programming goal and current skill level
3. Build the first version of the personalized learning-path generator

Final thoughts

The first dashboard is still an early prototype, but it already establishes the visual identity of DevPath AI.

The project is moving toward a platform where developers can receive a clear and personalized learning path, track their progress, maintain learning streaks, and stay motivated while improving their technical skills.