Elevate Equality

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Inspiration

The inspiration for this project came from seeing how many students in my school (including me) struggle to stay organized with assignments, due dates, and class info. Teachers all use different platforms, and it becomes super overwhelming. I wanted to build something that puts everything in one place — simple, clean, and easy to understand.

I also really like tech and wanted to challenge myself by building something “real,” not just a school project.

What it does

Akello is an all-in-one student dashboard. It allows a student to:

View their active courses

See upcoming assignments and due dates

Track student progress and statistics

View recent activity

Navigate through different parts of the platform like Courses, Assignments, Analytics, and Settings

Get an organized overview of their school life in one place

Everything is displayed neatly with TailwindCSS, which makes it feel modern and easy to use.

How we built it

We built the project using:

React.js for the frontend

TailwindCSS for compact, fast styling

CRACO for customizing the build setup

Custom components like a Sidebar, Navbar, and Dashboard pages

A small Python backend folder structure (for future expansion)

We structured the project with reusable components so everything stays organized. The dashboard stats (like assignments due, number of students, etc.) are generated through simple JSON-style data to simulate a real API.

Most of the work went into setting up Tailwind properly, building each UI section, and making the layout responsive and clean.

Challenges we ran into

We ran into a lot of challenges:

Tailwind refused to load at first, and the entire site looked like plain Times New Roman 🤦‍♂️

We had to fix multiple config files like tailwind.config.js, postcss.config.js, and craco.config.js

React kept throwing errors about imports, especially when I accidentally imported files from the wrong folder

Setting up the folder structure took way more time than expected

Debugging the environment on Windows was super frustrating — sometimes NPM just didn’t want to cooperate

But each problem taught us something, and it felt amazing once the dashboard finally displayed with full Tailwind styling.

Accomplishments that we're proud of

We actually got Tailwind working after HOURS of trial and error

The dashboard UI turned out clean, modern, and fully functional

Built reusable React components like Sidebar, Navbar, and Dashboard

Learned how to manage configs like CRACO and PostCSS

Created a project that looks way more professional than what I expected from a high-school team

Honestly, seeing the site come to life after everything kept breaking was one of the best feelings.

What we learned

How to troubleshoot build tools and configs

How React components communicate and render UI

How TailwindCSS works under the hood

The importance of file structure and correct imports

How real software development feels — it’s basically 10% coding and 90% debugging 😂

Patience… lots of patience

Overall, I learned way more than I expected, not just about coding but about problem-solving.

What’s next for Elevate Equality

(Elevate Equality = our project’s theme of giving every student equal access to good study tools.)

Next, we want to:

Add a backend API so assignments and course data can be updated in real time

Add login + authentication for students and teachers

Make a mobile version

Add AI assistance to help students plan study schedules

Build analytics charts to show progress over time

The goal is to eventually turn it into a tool that any school could use to help students stay organized and reduce stress.

Built With

• craco
• javascript
• postcss
• python
• react
• tailwind