frontend-project

Welcome to WDB's frontend project for development branch applicants 👋

Make sure you read these instructions carefully before you start. If you have any questions please reach out to webatberkeley@gmail.com.

The goal of this exercise is to create a simple app that;

• builds and compiles your code locally
• can be viewed at localhost using a local web server
• meets the requirements listed below.

If you have any comments or feedback please include it in the submission.md file. This is your chance to tell us what you thought about the exercise and any ideas or issues you may have had. It's a good way for us to get to know you and your process. We want to hear from you!

Happy coding and good luck!

---

Setup

We'll be using Figma to relay how the final product should look and behave. The Figma link can be found here: https://www.figma.com/file/Htm1VwQ4BlSh7dgPNg48Os/WDB-Frontend-Project?node-id=0%3A1.

If you are unable to use Figma or have errors dealing with it, we have attached some images of what the final product should look like in the Figma-images folder.

For this project, we're expecting you to use a frontend framework, including but not limited to: React.js, Angular.js, Vue.js. Which framework you use if up to your discretion and your choice will not impact our decision. If you haven't worked with these technologies or another popular frontend framework in the past, the student branch might be more fitting. If this is the case, email us at webatberkeley.org for the next steps.

---

The project

This project will be creating a simple Reddit clone, capable of displaying an array of posts with varying data. These posts must lead to their own page when clicked and display the comments associated with the post. Post and comment data can be found in Data.json. This project is meant to be on the lighter side.

---

Project overview

Please create a replica of the design provided (viewable through Figma or the images in the figma-images folder), and use the data provided in Data.json.

The Home Screen (Home Screen page in Figma, or home-screen.png) is the main page of the website and displays basic information on all of the posts. Clicking on a post brings the user to the Post View (Post View page in Figma, or post-view.png), which contains the entirety of the post and the comments associated with the post.

All images required to create the replica are provided in the img folder.

Try to style the Home Screen and the Post View as closely as possible to how they look in the Figma and the images.

Requirements:

• Use a navigation package or create an API to handle navigating to an opened post - anything is fine as long as navigation isn't hard coded for each post.
• Your website does not need to be responsive, and it should be built for a laptop or a monitor.
• DO NOT manually input or display post data i.e. do not hard code anything.
• DO NOT edit the Data.json in any way

Additional Details:

• Feel free to use UI libraries (Bootstrap, Material Design, etc...), or any CSS pre-processors (SASS, LESS, etc...). If you do not know what these are, no worries! There is no penalty for not using these tools.
• Feel free to change around the file structure as much as you want.
• Feel free to use any outside packages
• If you copy code from an outside source that's fine, but please include the source as a comment
• If the instructions seem ambiguous, that's on purpose! We want you to make as many decisions on your own as possible.

Bonus Points:

• Write neat, modular code.
• Write scalable code.
• Commented code.

Notes

• If you're unsure whether you're allowed to use a certain tool, go for it - we truly don't care - in fact, usage of outside tools is reflective of what you might be doing as a WDB developer as we highly encourage microservice architectures and writing as little code as possible.
• If you are unsure about spacing, distances, etc... feel free to eyeball it. We will not be answering questions relating to the details of the design, and instead, use your discretion. We will be looking more for functionality than a pixel-perfect replica of the design.

---

How to Submit

Take a look at the submission.md file before submitting. If you deviated from the instructions or have any feedback, that's the place to put it!

To submit your project, please place your submission into 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 and if you are unable to create one, please email us immediately. The Gradescope course code is 9DW2N5. You will see two different assignments: Frontend Technical Project and Backend Techinical Project. Please only submit to FrontendTechnical Project. You can ignore Backend Technical Project.

The technical project will be due at 8:00 am PDT on Saturday, September 19th. Clarification emails will only be replied to until 11:59 pm PDT on Friday, September 18ths, so if you have any clarifications, please let us know before then.

---

FAQs

When is the assessment due?

Please submit your exercise by 8:00 am PDT on Saturday, September 19th.

Which browsers should I support?

We'll look for compatibility with the following browsers:

• Google Chrome (latest version)

What color values should I use?

The exact color values don't matter; just try to get as close to the mockup as you can. You could also use a Chrome extension such as this color-picker.