Afterclass

Inspiration

We created After Class because students often struggle to balance assignments, exams, personal commitments, and their own well-being. Traditional to-do lists focus on what needs to be done, but they don't always consider how much time students have or how they're feeling. We wanted to build a productivity tool that feels more flexible, supportive, and realistic for everyday student life.

What it does

After Class is a student-focused productivity planner designed to help users organize their day and make meaningful progress without feeling overwhelmed. Users can manage tasks, keep track of commitments, check in with their energy levels, and use a focus timer to work in dedicated sessions. Its rescheduling feature helps users adjust their plans when priorities or schedules change.

Our goal is to make productivity more adaptable by helping students focus on what matters most while maintaining a healthier balance between studying and personal life.

How we built it

We built After Class using React for the user interface and Tailwind CSS for responsive styling. We used GSAP to create engaging animations and Locomotive Scroll to enhance the scrolling experience. The application uses browser local storage to retain tasks and commitments across sessions. We also developed interactive task management, energy check-ins, a focus timer, and a rescheduling workflow to bring the core experience together in one place.

Challenges we ran into

One of our biggest challenges was combining a visually engaging interface with practical productivity features. We wanted the experience to feel smooth and modern without making the application difficult to use. Managing task state, keeping schedules consistent, integrating animations, and ensuring the layout works across different screen sizes required careful attention. We also had to balance visual polish with keeping the interface simple enough for students to use every day.

Accomplishments that we're proud of

We're proud to have created a complete student-focused planner that brings task management, commitments, energy check-ins, rescheduling, and focus sessions into a single experience. We focused on creating a calm visual identity rather than another overwhelming productivity dashboard. We're especially proud of turning a simple idea into an interactive project that addresses a real challenge faced by students.

What we learned

Through this project, we learned how to structure a React application into reusable components, build responsive interfaces with Tailwind CSS, and integrate animation libraries into an interactive web experience. We also learned the importance of state management, persistence, usability, and designing around real user needs rather than focusing only on appearance.

What's next for After Class

We want to make After Class more intelligent and personalized. Future improvements could include smarter scheduling recommendations, better conflict detection, calendar integration, improved progress insights, reminders, and more accessible experiences across mobile and desktop devices. Our long-term vision is to help students build sustainable study habits while making time for the rest of their lives.

Built With

• browserlocalstorage
• css3
• gsap
• javascript
• locomotivejs
• react
• tailwind
• vite