Client-Side Project

In this project your team will be building a front-end application to consolidate the work you have done with JavaScript, React, HTML and CSS. You will have one week to research, plan and develop your application before you have the opportunity to present your work to your colleagues, instructors and clients.

You will be working in different groups from the last project, although in other respects the process will be very similar

For this project you will be building a React application to act as a front-end for one of the APIs built during the server-side projects. Your group will be working with an API none of you have seen before and you will need to familiarise yourselves with it before you start developing your app. The design of your app is up to you, but it must be able to make requests to all of the routes exposed by the API.

Tech Stack

This is a front-end project which should be built using:

• JavaScript + React

• HTML

• CSS

• The API asigned to your group

You are free to use any additional libraries as necessary (eg. for state management) but only do so if everyone in the group understands what they are for, how they work and how they fit in to the overall picture. Depending on the API your group is working with some extra libraries may be required.

You should create diagrams as part of your planning process. Wireframes will help you plan the layout of your app and sketching out the relationships between React components will help you plan state management and think about what information needs to be passed in props. We recommend using an online tool such as Miro or Figma to make collaboration easier, but which one you use is up to you.

If you have any issues with the API your first point of contact should be the group who developed it during the server-side projects. Trainers and mentors may be able to help but won't be as familiar with the code as the developers. With that in mind, when planning your own projects bear in mind that you may need to spend some time supporting another group with API issues.

Project Management

You should create a public GitHub repository before you start writing any code and post the link on the Discord submissions channel. It is up to you how to manage your branch structure, but we expect to see contributions from every member of the group. Make sure that the most up-to-date working version of your project is merged to the main branch ahead of your presentation.

We recommend using something like a Kanban board to help you manage your time. You can use a free service such as Trello or the built-in tools on GitHub, even something like Google Drive to facilitate collaboration.

How tasks are assigned is up to each group. If you are working individually or in pairs remember that communication is the most important tool you have at your disposal and that many problems will be averted if the whole team has regular check-ins.

You can work on the project outside of normal working hours, but there is no expectation of this. It will be up to each group to decide on how to structure the week to ensure everyone is able to contribute effectively. Don't be tempted to rush off and do extra work without keeping your colleageus in the loop, but also make sure you stick to any commitments you make. Trainers and mentors will not be available outside of working hours.

Presentation

The project will culminate in a presentation to the rest of the cohort along with some invited guests from industry. Each group will have 10 minutes to present their work, plus some time for questions from the audience. Your presentation should include:

• A discussion of your planning

• A demo of your app

• Discussion of some of the code. What were you particularly proud of? Were there any bugs you found really difficult to squash?

• Contributions from everyone on the team

Do not go through the code line by line, you won't have time. Try to avoid showing the editor during the presentation as jumping between files can be very confusing for the viewer and time-consuming for the presenter. Instead use a tool such as Carbon or the Polacode extension for VSCode to generate screenshots of code you want to talk about and add them to your slides.

Next Steps

When you finish work on your app you should make sure that it has been thoroughly tested and that there are no hidden bugs. There will already be a README file created for you by create-react-app but it will be full of generic instructions. Replace the contents with any specific instructions for using your app. Take a look at this article for some tips on writing a good README.