Skip to main content

Project 2: Design a New Noteworthy Website

Ready to make your first React website?​

React is the most commonly used web framework. Most open front-end positions require React knowledge, and it will supercharge the speed with which you can build websites. In the end however, it just transpiles (converts to) normal HTML/CSS/JS files. Let’s use React to design a new website for the Noteworthy acapella group to use. Here’s the current Noteworthy website. Also see their Welcome Back website. You have mostly free rein to resign this website however you want, but some design pointers and website expectations (as suggested by Noteworthy themselves) are below:

This website should have four pages with an expect layout below:

  • Home page (block 1)
  • About us (block 2)
  • Our favorite videos (block 3)
  • Members

Key points by the client:​

hand drawn hand drawn

Expected Members Page Layout: Copy DeCadence’s members page exactly.

Have 3 images per row. The bios for each member can be clicked through using a clicked carousel.

Here are examples of websites we want to emulate:

We’re open to any color scheme you think would look good. We’re happy with the color scheme from this page, so you can use this by default.

As media and content on the website, use the following website media folder and members bios + info below:

In the process you will gather an intuition for how React integrates HTML, CSS and JS. This project will also have a figma component. This Figma will be due during checkpoint 1 in lieu of your actual website design at that time. This is to encourage thought and care behind a design that you choose to pursue for this project. NOTE: We’ll be using the best of these submissions to pitch an actual new website for Noteworthy! So if you want that (and the resume padding that comes with it), try. ChatGPT policy​

Chat GPT?​

Yes, ChatGPT can make your website for you (hell, it made this assignment), but don't be charmed: ChatGPT cannot build websites.It is terrible at understanding components. It can help you now, but it will fail you when you want to build or contribute to a larger website. And if you haven't learned the basics now, you will feel lost very soon. However, it's important to get used to using AI as a companion when writing code, and companies are quickly adapting these tools for their developers. So this is the rule: You can use (are encouraged to use) ChatGPT, as long as you understand what it's doing. You will be asked to explain your code during check-off. This policy extends to Github Copilot.

Is this a group project?​​

Yes. You can get in groups of a maximum of three people. You could also do this project by yourself. Whatever floats your boat. A form will be sent out for you to put who you want to work with if you do choose to be in a group.

Setup​​

You will need a: Browser: We recommend Chrome, but feel free to use any you like. If you're using Safari, make sure you enable dev tools. Code editor: If you don't have a code editor, we recommend VSCode. You can download it here. NodeJS and NPM: You should have installed these during lecture. Installing NodeJS should bring NPM with it: https://nodejs.org/en You can create your website using Vite. You can read more at our guide.

Collaborate​​

There are two principal ways to collaborate. The easiest is to get together to make the main page of the website, and then each person can make their individual sites and combine the files at the end. You may optionally use Git. One person creates the project and repository, and pushes it to GitHub. Then add everyone else as collaborators, and they can clone the project. Each member then pulls and pushes repeatedly. You can learn more at https://rogerdudler.github.io/git-guide/. Grading & Submission This project will be split into two parts, the Figma and the actual website. You will have to submit both of these separately, and each part will have a separate deadline (with the Figma due first). Submit each part on gradescope. For your website: DO NOT UPLOAD YOUR node_modules as this will have too many files in it. Create a zip file with your files and upload it. You will be graded similarly to Project 1. We will be judging your website functionality, style, and content. We will also be awarding extra points if your website goes above and beyond and is in the running to be selected by Noteworthy, and if it works on mobile.

Tips From Matt​

  • Use React Bootstrap or another component library
  • Don't Reinvent the Wheel, I like the current version it works pretty well
  • Plan ahead with your partners when and where to meet regularly, communication is key to any healthy relationship