React-Anna-group

Week 4

In the final week of React you will put everything you have learned into practice and build the app of your dreams! As this is a big thing one of the mentors for this module will be there to help you think your app through. They will not be allowed to write any code for you however.

This project will be a great thing to put on your CV so make it look good and be something that you will enjoy working on later to keep improving. Also make sure you challenge yourself, you have a mentor to guide you if you get stuck! This means you will learn more if you go out of your comfort zone a little.

Project requirements

We want you to get excited and be free to build something you are passionate about, but there are some things that we need to see you have mastered. This means there are a few requirements:

• The app needs to have multiple pages and use client-side routing
• The app should make use of the Context API or use custom hooks
• You can either use an API that you have built or access to (then just include the backend code in the project) or should use data from a public API. You will not be graded on backend code
• You should not use class components
• Follow the guidelines for technical assignments. This will help you not get stuck or end up with only half an application and make sure that what you have at the end is something presentable. Your README should also be filled with information for potential recruiters/reviewers

Bonus points:

• Testing your app!
• Having a backend (although we will not look at that code)

TIPS

• Do your research first! Is all the information you need available in the API? Changing API’s halfway is devastating.
• Please refactor and write tests often! It may feel like it is delaying your progress but trying to refactor and testing a week’s work of code at the end will actually take you more time overall!
• Make sure you reserve time for the UI. This is one of the main projects recruiters will look at, so it should look good!
• It is tempting to include many libraries to solve certain things, but not all npm libraries are good and you need to be careful. Have a look at this article to learn how to choose the right package.

Final product

The final product (the repository is the product, not just the application) should be something that you can show off on your CV. So have a look at our technical assignment guidelines here and our design guidelines here to see what it entails. By following those guidelines your app AND your code will look great, making it a great thing to show off to employers. You will also get into the habit of doing this with all the technical assignments you will get during your job search.

Planning and deadlines

There are only 2 deadlines in the project, how you divide your time for the rest is up to you.

Deadline 1: Project definition

By Thursday 18:00PM CET (but the earlier the better) you should send a short description of what your app will be as well as the name of the company whose brand/colour palette you will be mimicking to your project mentor.

The description should make it clear that your application will adhere to the requirements. It is best to divide it into must have parts (that fulfil the requirements and will be built first) and nice to have parts (features you can add on later to make your app cooler). The reason to make this division is to make sure that you will also prioritise your work correctly. You will probably run into time issues at the end, and it is possible to cut out extra features, but not the must have’s. A week is not a lot for building an application and in the end we will only be able to evaluate based on what is working.

The company brand/colour palette will help you design something that looks good, as explained in our design guidelines.

Deadline 2: Application

By Tuesday 23:59PM CET you should send a link to your github project to the Education Director. Make sure that everything works for them! The best way to test this is to clone your repository to a new directory on your computer and try to run it there.

Grading

After finishing the project you will get another technical interview about your own project (similar to what you had in the Browsers module) to determine if you can go on to the project. Keep track of your class channel to see when these will be.

Note: The difficulty of the application affects the grading in two ways:

• You get extra points for creating a difficult application (things like making your own hooks, good state management, loads of features, etc)
• We will expect simpler applications to have better structured code and be more lenient on complexer applications

Note: following the technical assignment guidelines will also be a part of the grading

• Make sure you have read the design guidelines and that your app design follows these guidelines
• Make sure you have read the technical assignment guidelines and that your code and README follows these guidelines

F.A.Q.

What API’s can I use?

Any API you want, you can look at the Ideas in the Using API’s module to get some ideas and see what to look out for.

Can I use third party libraries?

Yes! But please check with your mentor if you decide to use one. We don’t want you to use a library that abstracts away some of the things we want to teach you.

Any UI toolkit (things like Material UI or Semantic UI that give you some basic components that have a particular style) is fine. The libaries we used during the curriculum is also fine. For the rest please let us know what you are planning.

Final remarks

As you are all working on the projects this week there will not be a Q&A session on Sunday this week.

Enjoy!