This project is designed for you to gauge whether you want to apply to the bootcamp or industry branch. Follow the steps below to finish and submit your project. Do not be discouraged if you get stuck. Completing all tasks for the branch you are applying to is highly preferred, but we will only assess your project based on whatever you submit to us.
If you have any questions, please reach out to us at our email: [email protected]
- There are two Figma pages (access them in the top left). Please make sure you click on the project you are completing.
Our client is My Little Unicorn and we will be building their website. Their description is as follows.
Introducing the magical world of unicorn adoptions! We are My Little Unicorn, a unicorn adoption agency. Our platform allows you to bring a touch of whimsy and wonder into your life by adopting your very own unicorn. These mystical creatures come in all shapes and sizes and each one is as unique as a fingerprint. Whether you're looking for a playful companion or a majestic addition to your herd, we have the perfect unicorn for you. Adopting a unicorn is easy, simply browse our gallery, choose your favorite and we'll take care of the rest. So why wait? Bring a touch of magic into your life today and adopt a unicorn!
There will be no skeleton provided for this project since you are able to use any framework/library you want. We would prefer if you completed it in Next.JS (but will not mark you down if you use something else). You are welcome to use NPM or Yarn when downloading dependencies.
Use the documentation below to complete your project.
- Figma Designs: https://www.figma.com/file/hVK6z7EJGnuDks4Lz0XCaG/%5BSP-23%5D-Frontend-Technical-Project?node-id=2%3A494&t=9UqRnRczpRWANRB9-1
- Next.js (optional): https://nextjs.org/
- Chakra UI (optional): https://chakra-ui.com/
Complete the navbar component. Clicking the icon or text in the top left should take you back to the home page, clicking "About Us" should take you to the about-us page, and clicking "Gallery" should take you to the gallery page.
Complete the Landing page UI in the home page of your project. Make sure to follow the Figma provided.
Complete the About Us page. Input a random value to start on the "score" at the bottom right of the page. Clicking the +1 button should increment the score by one.
Complete all of the bootcamp tasks before moving forward.
Complete the Gallery page. This page displays all the unicorns with an option to "adopt" each of the unicorns. Each unicorn should be kept track of and the adopt button should change depending on if you have selected to adopt that unicorn. In addition, implement a basic search (this doesn't have to be overly complex). You should filter out unicorns by name if they are not matching the search.
Congratulations! To submit your project, please make sure your project is in a GitHub repo that is set to private. You will be submitting your code on Gradescope. If you do not have a Gradescope account, please create one. If you are unable to create one, please email us
immediately. The Gradescope course code is 8NBBGP. You will see two different assignments: Frontend Project and Backend Project. Please only submit to Frontend Technical Project. You can ignore Backend Technical Project.
The technical project will be due by Monday, 1/30 at midnight. We will be unable to respond to clarification emails sent in after then. If you have any questions about the project, please let us know before then by email. Also reach out if you have any issues with the gradescope submission (fyi there is no autograder for this project so we will be reviewing your code manually).
Also, this page may potentially keep changing if we get some frequently asked questions, so keep this repository bookmarked and check back on it every now and then! If there are any major changes, we'll make sure to email you about those.