https://github.com/pennlabs/frontend-challenge-f24

Penn Labs frontend challenge
https://github.com/pennlabs/frontend-challenge-f24

Last synced: about 6 hours ago
JSON representation

Penn Labs frontend challenge

• Host: GitHub
• URL: https://github.com/pennlabs/frontend-challenge-f24
• Owner: pennlabs
• Created: 2024-09-12T03:26:13.000Z (2 months ago)
• Default Branch: master
• Last Pushed: 2024-09-12T04:32:21.000Z (2 months ago)
• Last Synced: 2024-09-13T03:19:29.772Z (2 months ago)
• Language: TypeScript
• Size: 30.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Challenge Fall '24

Welcome to the Penn Labs Frontend Challenge!

If you have already done this challenge, there's a [section below](https://pennlabs.notion.site/0d81270614be4947b7a36e2b2195d737?pvs=25#b23b8785be0141fdb97d6c556ec7bea2) for you. 

In this challenge, you will be building a product called Penn Course Cart in React! The goal of this challenge is for you to demonstrate:

1. An eye for building intuitive, feature-rich user interfaces

2. Ability to build products with minimal direction

3. Ability to work within a set timeline

More concretely, you will build an interface where users can explore computer science courses added at Penn, can add them to a cart, and checkout.

## Getting Started

1. Copy this [repository](https://github.com/pennlabs/frontend-challenge-f24) to your own GitHub account by clicking the green "use this template" button. You will have to make a Github account if you don't already have one. **Be sure to create a private repository.** **You will be submitting a ZIP file at the end of the technical.**

2. [Clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) the repository you just made to your own computer. 

```bash

git clone https://github.com/pennlabs/frontend-challenge-f24.git

```

3. Make sure you have [Node](https://nodejs.org) installed.

4. Navigate to the cloned directory in the command line and run `npm install`

5. Run `npm run dev`

**Note:** This project is bootstrapped with [Vite](https://vitejs.dev) using [Typescript](https://www.typescriptlang.org/), so hot-reloading has been configured. This means after you run `npm run dev`, the application will be recompiled automatically after a file is edited.

## General Structure

We have provided minimal starter code with the following structure. 

```

index.html           Root HTML file for each page

src/                   Where the JS logic is

  components/          Contains all React components

    Cart.tsx           Basic component for the course cart

    Courses.tsx        Basic component for rendering courses

    Nav.tsx            Basic component for the navbar

    ...                Feel free to add other components

  data/                Contains data rendered by the components

    courses.json       Contains information on CIS courses at Penn

  App.tsx              Root component for the app

  index.tsx            Renders the React app

  ...

```

## Features

Your application should implement the following features. 

1. **Explore Courses**

    

    If you view `src/components/Courses.tsx`,  you'll see that it is rendering some of the courses data from `src/data/courses.json` What you need to do is design a more robust way to display this courses information. You should display all information contained in the JSON — though put some thought into how to go about doing this. For example, you might only want to show the description once the user clicks on the course.

    

2. **Search and Filter**

    

    At the minimum, the user should be able to:

    

    - Type into a search bar to find courses by title and description

    - Filter courses based on number

3. **Add courses to your cart**

    - A user should be able to add a subset of these courses to their cart. The user should not be able to add more than 7 courses to their cart.

    - When a user adds a course, this addition should be reflected in:

        - How that cart is rendered

        - How that course is rendered (e.g. there should not still be a button to add that course to the cart, and maybe the text should be grayed out)

4. **Checkout cart**

    - Allow users to "checkout" their current cart, which takes the user to a new page, containing a "receipt" with the courses they checked out with. This should be implemented with routing, eg. with [React Router](https://reactrouter.com/en/main). The new page **must** show a different URL in the address bar and get the courses in the receipt using URL or query parameters.

5. **View cart**

    - The user should be able to click a button to view their cart.

        - If the cart has no items in it, tell the user that their cart is empty.

        - If the cart has courses in it, display the courses and relevant information about them.

6. **Additional features**

    

    If you finish early, feel free to add an additional feature! Here are some ideas.

    - Let users rank courses in order of preference using a drag and drop menu

    - Integrate data from the Penn Courses server

        - Note that we added the line `"proxy": "[https://penncourseplan.com](https://penncourseplan.com/)"` to `package.json`. This proxy will allow you to make requests to the Penn Courses backend without running into CORS issues.

        - The [“Retrieve Course” endpoint](https://penncourseplan.com/api/documentation/#tag/PCx-Course/operation/Retrieve%20Course) should have all the data you need to add information for a specific course, but you are welcome to use any endpoint that doesn’t require authentication.

        - Tip: use semesters from Spring 2022 and earlier - they will have 3-digit course codes that match the `courses.json` data.

        - Example:

    

        ```jsx

        fetch('/api/base/2022A/courses/CIS-120/')

          .then(res => res.json())

          .then(console.log);

        ```

7. **Code quality**

    

    These items are totally optional, but a great opportunity to demonstrate your engineering skills!

    

    - Turn on TypeScript’s `strict` mode

    - Add a [linter](https://eslint.org/)

    - Add unit or integration tests

## Additional Tips

- For styling, use whatever you want:

    - CSS frameworks (Bulma, Bootstrap)

    - CSS files (or SCSS)

    - CSS modules

    - CSS-in-JS

    - `styled-components`

    - Tailwind

    - shadcn/ui

- For state management, you have several options:

    - Vanilla react state, props and [context managers](https://reactjs.org/docs/context.html)

    - [Redux](https://redux.js.org/)

    - [SWR](https://swr.vercel.app/)

    - [React Query](https://react-query.tanstack.com/)

- For navigation:

    - React Router

### **Getting help**

If you have any questions about the project or need some help, send an email to [email protected]!

### **Repeat applicants**

First off, thanks so much for your continued interest in Labs. We've accomplished a lot in the past year and have plans for more great products and features which need new developers to tackle them—so fingers crossed!

At Labs we don't just build new products, we also maintain legacy code bases and year over year push out new and improved versions. [Penn Course Review](https://penncoursereview.com/) and the [Common Funding Application](https://penncfa.com/) are two great examples.

That said, please note the differences between the current challenge and previous challenge, as we constantly update our challenge between semesters in accordance with the submissions we review and applicants' feedback. In line with this, we want you to take your submission from when you last applied, update your code, and take it to the next level with new features and data. Be deliberate with your implementation decisions, architecture, and documentation such that if someone else opens your code 6 months from now they'll be able to pick up right where you left off. We're excited to see what you come up with.

## Submission

You should have created a private copy of the template repository we gave you. To get a ZIP file that you can submit on the submission form, push all your code to GitHub, click the green "Code" dropdown, and then click "Download ZIP". You can then upload this to our submission form.

Please do NOT zip your code from your local computer, as that will package a large number of unnecessary files from the node_modules folder - if the submission is 1GB, something is wrong!