Hooray, you’re almost done! But first, you’ll need to ensure that your design assets and codebase are ready for whoever the project is going off to.

Design

Wireframe State

Figma serves very well as a canvas to throw down ideas, but that also means it can get a little messy. Before you wrap up the project, make sure you have a final view that contains all your completed wireframes in a neat and organized manner.

If your project should support multiple platforms, ensure you have wireframes for several devices - for example, desktop, laptop, tablet, and phones (for every OS the project should support if the designs are different).

Have a finalized design system view containing the project’s color palette, typeface, and significant components. If you designed any icons or graphics, have those separated into groups so they can easily be exported.

Codebase

Cleanliness

Just because your project works doesn’t mean it’s done! It’s important for your codebase to be clean and organized so that future developers (such as your clients or other CodeLab members) can understand what you’ve written and add features more easily.

Make sure that you’ve…

1. Deleted any unused code (such as conditional branches that never execute, code written after return statements, unused variables, and code that’s commented out)
2. Simplified your logic by replacing long if threads with switch statements whenever the input is predicatble and replacing short if threads with ternary operators
   1. There are only examples - do whatever you deem necessary to reduce the size of your codebase and improve the performance of your application
3. Formatted your code in a tidy and consistent manner either manually or using a linter
   1. The most commonly used JS linter is ESLint
4. Added many clarifying comments throughout your project

Testing

You should also ask your team to write and run tests. Although the process may be tedious, testing is an industry standard practice and you’ll benefit highly from learning it early on! We recommend reading plenty of online resources and talking to your project mentor about this (if you’re on a Spark project), as there are many ways to write, structure, and execute tests. Some are better than others.

Here are some common testing libraries you may find helpful -

• Jest (used for many JS projects, including Expo)
• React Testing Library (for React)
• Vitest (unit testing framework for Vite projects)
• Cypress (framework for testing apps directly in your web browser)
• Storybook (build UI components in isolation and test edge cases)

Although in some organizations, developers write tests as they build their code (sometimes called test driven development) we won’t ask your team to do that. Instead, we recommend writing tests to validate your features every few weeks and at the very end.

Repository State

When your codebase is complete, you’ll need to…

1. Merge any remaining branches into main
2. Delete any branches that have been merged or abandoned
3. Close any abandoned pull requests and issues

Communication

Communication is critical during this phase of the project! Please make sure to communicate with either your manager on exactly what needs to be done.