Wish Cosmos: Holberton Final Project

Mohameth Seck
Nov 6 · 6 min read

The past 9 months here at Holberton have been the toughest and most exciting experience I have ever had thus far. Other schools just don’t compare to what I have been given the opportunity to accomplish here and what better way to finish up the year than with a final project.

For our final portfolio project here at Holberton School New Haven I was part of a group of three.

Anthony Le: Backend

Ty Edge: Product Management & Backend

Mohameth Seck (Me): Frontend

Anthony proposed the idea of a wishing well app where visitors to our site can make a wish and it’d be thrown into a pile of other wishes. Users can then pull out a random wish and see what wishes were made. After researching and finding other similar ideas we settled on switching it to the idea of wishing upon a star. The purpose of the web app was to create a platform where visitors to our site can explore other people’s wishes and add their own wishes. My personal focus for this project was to design a user interface and experience that was easy to use and put a focus on the stars added to the screen.

What attracted me to this project?

Have you ever thrown a coin into a fountain or well and made a wish as a kid? How about a shooting star? I remember throwing coins into a fountain hoping for my wishes to come true. Now I’m older and rather put that coin into a piggy bank to save up for what I’m wishing for. Well that was the idea behind the Hopeful Cosmos app. To allow visitors to make a wish and have others explore those wishes. Now the concept was appealing to me, but it was the simplicity that drew me in. It was an idea that could start off small and grow as we added more features to it. That and we only had two weeks to get a working MVP. As a frontend developer for the project it gave me an opportunity to experiment and learn new technologies to develop the app.

UI/UX: Put the focus on the stars

When designing the user interface for the web app I had to think from a user end perspective. In my opinion the best design is the one where the user knows how to use your product just by naturally using it. For example, when I visit a e-commerce site I’m expecting the shopping cart at the top right corner, a similar check out process and a quick way to continue shopping when adding an item to my cart. You don’t expect that to change and why would you? From a design perspective you probably want you visitors to know how to use your site naturally as they would with something similar.

When an user first visits the site the top section of the screen will be black with white dots representing the stars. When a user hovers over the star it will glow. At the bottom is a form to let the user make a wish. After submitting the wish it will be added to our database and queried when the page is refreshed. The page loads up 50 random wishes everytime.

Hovering over a star
Wish card of the star selected

When a user selects the star they will see a card with the information about the star appearing in the center screen. It will display the name of the star, author, the wish made, and the location of where the wish was made if the user lets us access that information.

The technology used for the frontend was mostly HTML, CSS, Javascript, and jQuery. Other resources used were Bootstrap and Sass. Although what we have currently for the project isn’t using everything listed on the left I included tools used throughout the development cycle of building the MVP. The screenshots above is what we ultimately ended up with, but is still considered the MVP.

What my goal for the frontend was to use as much screen real estate as possible for the stars. I wanted the focus to be on the exploration of other stars/wishes. One thing I wanted to implement was a quick onboarding to help users navigate the app. It would appear first when the screen loaded and be available when they need it again.

A ferris wheel like menu. Showing the onboarding card.

One challenge I had was limiting the number of buttons on screen. I added a hamburger menu, but added a ferris wheel effect (because it looked cool) for it to limit the number of buttons appearing on screen. The menu consist of a link to the Github project, a way to share the app, load up more random wishes using Ajax, and the onboarding guid. There was a option for making a wish, but decided that something that crucial to the app should be a one step process. So having the form ready at the bottom of the screen was the final decision.

I incorporated Bootstrap components just to prototype and speed up development, but that ended up making things longer. The point of Bootstrap was to also make things more responsive, but it ended up messing with elements that were already in place.

Star card popping up when a star is selected

The star card was supposed to be much smaller and make it easier to navigate the app. One thing we could not get done in time was notify the user on why we were requesting their location and what it was going to be used for. This was one question that kept popping up when we let people beta test it.

What I’ve Learned

Through out the project I’ve gained a better understanding of Bootstrap and jQuery. Bootstrap was to speed up development by already having components ready to use, but ultimately slowed things down when incorporating it into production. What I would have done differently is make everything from scratch with html and css. It would have made things easier when linking the frontend and backend on Anthony’s side. Also communication was issue for the project, but Slack ended up being the glue to our team staying organized.

What I learned about myself as an engineer is that I’m very interested in the design aspects of a product. How the user will interact and navigate the app and find ways to make that experience as easy and smooth as possible. I’ve also enjoyed working with new and modern technologies. During the time of exploring new technologies to use for the project I found REACT and Node.js to be the most intersting. Full stack web is definitely on my list of things to learn. I want to be involved with everything related to development.

About The Author

I currently attend Holberton School at the New Haven, CT campus studying full stack software engineering. I am specializing in Full Stack Web for my second year. My interest are in full stack web and mobile development (specifically iOS). I’m a AR/VR enthusiast and enjoy doing UI/UX design. Anything from the design of the product, to the development and marketing is what interest me most.

Project Github: https://github.com/hopeful-cosmos/WebApp

Project Site: https://hopeful-cosmos.me

Project Landing Page: https://mohamethseck34.wixsite.com/hopefulcosmos

LinkedIn Profile: https://www.linkedin.com/in/mrseck/

Twitter: https://twitter.com/seck_mohameth

Mohameth Seck

Written by

Studying Software Engineering at Holberton School, New Haven, CT. Learning iOS development on the side. VR/AR enthusiast. I just want to make dope stuff 🤷🏾‍♂️

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade