Skip to content

Update readme to follow notion #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eyingxuan wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update readme to follow notion #8

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 63 additions & 80 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,37 @@
# Penn Labs Frontend Challenge
# Frontend Challenge: Fall '20

> If you have already done this challenge, there's a [section below](#repeat-applicants) specifically for you.
Welcome to the Penn Labs Frontend Challenge!

The frontend challenge for this semester is to build a product called Penn Course Cart in React! The goal of this challenge is for you to demonstrate:
If you have already done this challenge, there's a [section below](#repeat-applicants) 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) 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.git
```

3. Make sure you have [Node](https://www.seas.upenn.edu/~cis197/development) installed.

### Getting started
4. Navigate to the cloned directory in the command line and run `yarn` or `npm install`

- Copy this repository to your own GitHub account by clicking the green "use this template" button. Make sure you create a **private repository**
- You'll have to make a GitHub account if you don't already have one :stuck_out_tongue:
- [Clone](https://help.github.com/en/articles/cloning-a-repository) the repository you just made to your own computer:
```bash
git clone git@github.com:{USERNAME}/frontend-challenge.git
```
- Make sure that you [have Node installed](https://www.seas.upenn.edu/~cis197/development)
- `cd` into the cloned directory and run either `yarn` or `npm install`
- Run `yarn start` or `npm run dev`
5. Run `yarn start` or `npm start`

---
**Note:** This project is bootstrapped with [Create React App (CRA)](https://github.com/facebook/create-react-app), so hot-reloading has been configured. This means after you run `yarn start` or `npm start`, the application will be recompiled automatically after a file is edited.

### General structure
## General Structure

We have provided minimal starter code with the following structure.

```
public/
Expand All @@ -48,85 +53,63 @@ src/ Where the JS logic is
...
```

---

### Features

1. **Explore courses**

- If you view `src/components/Courses.js`, 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. **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:
1. How that cart is rendered
2. How that course is rendered
- For example, there should not still be a button to add that course to the cart, and maybe the text should be grayed out.

3. **View cart and checkout**
## Features

- 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 it in, display the courses and relevant information about them.
- When the user is satisfied with their course cart, they should be able to "checkout"
- This will either take the user to a new page containing (or will display on the same page) a "receipt" containing the courses which they checked out with.
Your application should implement the following features.

4. **Additional features**
1. **Explore Courses**

- Feel free to add other features as well! Here are some ideas:
- Big bonus if you integrate other data (course times, when they're offered, etc.)
- A great resource is the [Penn Labs API](https://github.com/pennlabs/labs-api-server)
```
fetch(https://api.pennlabs.org/registrar/search?q=cis-110)
```
- Add animations for adding and viewing courses and the cart
- Let users rank courses in order of preference
- Take advantage of a [linter](https://eslint.org)
- Allow users to filter and sort courses by different metrics
If you view `src/components/Courses.js`, 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.

---
In addition, a user should be able to filter or sort courses by particular properties such as keywords in course descriptions, prerequisites etc.

### Additional tips
2. **Add courses to your cart**
- A user should be able to add a subset of these courses to their cart. Further, 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)
3. **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.
4. **Additional Features**

Feel free to add other features as well! Here are some ideas:

- Big bonus if you integrate other data (course times, when they're offered, etc.). A great resource is the [Penn Labs API](https://github.com/pennlabs/labs-api-server). Let us know if you need an API key,
- Add Typescript ([https://create-react-app.dev/docs/adding-typescript/](https://create-react-app.dev/docs/adding-typescript/)) to your application. Kudos if you turn on `strictNullChecks` and `noImplicitAny`!
- Allow users to "checkout" their current cart, which takes the user to a new page (React Router/next.js could be useful here!) containing a "receipt" with the courses they checked out with.
- Add animations for adding and viewing courses and the cart
- Let users rank courses in order of preference
- Thinking about code quality: take advantage of a [linter](https://eslint.org/).

## Additional Tips

- For styling, use whatever you want:

- CSS frameworks (Bulma, Bootstrap)
- CSS files (or SCSS)
- CSS-in-JS
- `styled-components`
- ...

- For state management:

- Vanilla react state and props
- Redux
- ...

- CSS frameworks (Bulma, Bootstrap)
- CSS files (or SCSS)
- CSS modules
- CSS-in-JS
- `styled-components`
- 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/)
- For navigation:
- React Router
- ...

---

### Getting help
- React Router

If you have any questions about the project or need some help, send an email to **Daniel Tao** (dtao@seas.upenn.edu).
### **Getting help**

---
If you have any questions about the project or need some help, send an email to **Daniel Tao** ([dtao@seas.upenn.edu](mailto:dtao@seas.upenn.edu)) or message him on [Facebook.](https://www.facebook.com/danieltaox/)

### Repeat applicants
### **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.
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.

In line with this, we want you to take your submission from when you last applied, clean up 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

## Submitting
Follow the instructions on the Technical Challenge page for 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.