Storefront

Animated Logo-Splash Screen
Animated Landing Page
Weekly Activity Trends
Inventory Listings
Hourly Activity
Quick Actions

Inspiration

This project was built to make an easy way to manage and analyze data and inventory, two things that services on campus such as the Aggie Reuse Store and the Pantry both need to do at all times.

What it does

The UI allows staff to track inventory and sift through a paginated list of items in stock. Staff are able to track what is in stock and what goes out of stock through the page and analyze data such as when the most people visit the storefront and keep track of the most popular hours and days of the week. The provided tools give easy access to pre-analyzed data that allow the staff to make informed decisions over changing opening hours and what items are popular or unpopular.

How we built it

The project is made with a Django backend backed by a MongoDB database for persisting activity data, inventory items, and crunching the latest numbers for the charts on the UI. The frontend is written with React and NextJS and uses ChartJS to visualize data with some additional modifications to add guides and easy navigation. The appearances are created with the aid of TailwindCSS alongside copious amounts of normal vanilla CSS for Javascript-less animations that run smoothly.

Challenges we ran into

Creating animations and timing them correctly with purely CSS proved to be a more difficult task than it appeared. It resulted in a stunning visual but ate away at a lot of time I could have spent working on the API design and integration. As a single person, this results in a noticeable improvement in the UI of the frontend but meant that there were some features I was unable to add.

Accomplishments that we're proud of

I initially started this as it is a project I've been meaning to work on for the past couple months. I wanted to see how far I could go with my current skills alone and I'm proud of what I was able to accomplish in this short time frame. An especially large highlight is the CSS animation used for the landing page that took up over 200 lines of pure CSS and a lot of timing changes and pushed what I knew about CSS to get the elements to do what I intended.

What we learned

I learned today of the limitations of working alone and methods to improve productivity given a tight time constraint. Planning early with a smaller scale idea and building it up to what I thought of at the beginning is a great place to start and while I accomplished a lot today, I could have created a lot more with some better planning.

What's next for Aggie Reuse - Storefront

I would like to finish up the codebase for the project. This was a project that I have wanted to complete for months and now I have a solid start to it. Once it is completed, I can think of some places I have the ability to implement parts of the work into for beneficial results as I initially selected my tech stack with compatibility in mind!