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: webatberkeley@gmail.com
There are two Figma pages in the link below ("Bootcamp" and "Industry" -- access them by clicking the Figma icon in the top left). Please make sure you click on the project you are completing to see all of what you will complete.
- IMPORTANT: the Gradescope entry code is
4GEP2N, please use that! - The font used in the Figma (HP Simplified) may not be easily accessible on certain computers. As an equivalent you may use Oswald, which can be found on Google Fonts.
Taylor Swift, an influential artist in popular culture and the music industry, has one of the largest and most dedicated fan bases. However, after recent incidents selling her Eras Tour tickets with Ticketmaster in 2023, many fans were frustrated about Ticketmaster’s inefficient ticketing system. Taylor Swift wants to change that.
Her team now needs a reliable website where she can sell her concert tickets efficiently. Taylor Swift needs her own “Ticketmaster.” We want to make our ticketing website trendy and fitting with Taylor Swift’s aesthetic. And the process starts by launching a new central hub for all of Taylor Swift’s concert tickets.
There will be no skeleton provided for this project since you are able to use any React 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/A5LGDC2IdQpcEtaXcALZd7/%5BSP-24%5D-Frontend-Technical-Project?type=design&node-id=0%3A1&mode=design&t=tswPi4JprGlyifpU-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 "Merch" should take you to the Merch page, and (industry only) clicking "Events" should take you to the Events page.
Complete the Landing page UI in the home page of your project. Make sure to follow the Figma provided. The "See Her Perform" button should link to the Merch page.
Complete the Merch Page. For each merch item, hovering over the item should reveal a card with a button to buy the merch. An example of the card is shown in the top right card, but all cards should have this functionality. The button to "Buy" does not need to have functionality, but you may add styling for hovering over the button.
Complete all of the bootcamp tasks before moving forward.
Complete the Events page. This page displays all of Taylor's upcoming events. You should have at least the events on the Figma in your implementation, but you may add more to make the page more functional.
In addition, please implement the search and sorting functionalities on this page. As a user types into the search box, the events list should update to only show events with names matching the search terms. The "Time" dropdown should have a list of times including at least the times already on the Figma, but you may add more times if you'd like. The "Date" dropdown should contain the days of the week. When an option in a dropdown is clicked, only events that match the selected option should be shown. For example, if "Saturday" is selected, only events that are on Saturday should be displayed. If "Monday" and "4:30 pm" are selected, only events that are on Monday and at 4:30 pm should be displayed.
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 4GEP2N. 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/29 at 11:59 PM PST. 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 (note that there is no autograder for this project so we will be reviewing your code manually).
Please be ready to run your web app locally for the technical interview! This means being able to view your web app in a browser and interact with it.
Also, this page may potentially update 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.