🚀 Lightspeed

This repo is the Zylo front end coding challenge for React in Typescript.

Preparations

• Read through this README first (already crushing it, great start!)
• Ensure you have a Github account and git installed locally
• Ensure you have Node & nvm installed
• Get familiar with Material UI
• Get familiar with Vite & Vitest
• Get familiar with The Star Wars API
• Get familiar with Tabler Icons

The Project

This project is a React Typescript app powered by Vite that uses Material UI for a component library and React Router for routing.

Expectations

For this project we expect you to spend about 2-3 hours completing the objectives. Please try to timebox yourself to this amount of time.

While there are no hard time cut offs, please do not exceed 4-5 hours working on the project. If you want to spend some extra time adding any "bonus features", proceed at your own discretion, but this is not expected.

If you find yourself stuck or struggling, try moving on to something else. If you're unable to complete everything within this timeframe, no worries! We're looking at more than just whether you completed the objectives.

After you have submitted your work, we will review it internally first and then likely follow up with a technical interview to discuss your submission. Be prepared to explain your solution, process, reasoning, and any challenges you may have faced.

Guidelines

In this age, we have no shortage of tools available to us as engineers. For the sake of keeping things consistent for us, please try to stick to the packages and tools already installed and use native functionality otherwise.

Here are the packages you already have at your disposal:

• @mui/material
• @mui/x-data-grid
• @tabler/icons-react
• react-router

If you find yourself wanting to pull in another package, that's okay. Be prepared to give your reasoning on this decision.

You will see some "Bonus Objectives", but please focus on those only after completing the main objectives.

Lastly, committing often helps us see your process.

We're excited to chat through your thought process and architectural decision making, so be ready to share some of the challenges you encountered.

AI Tooling

As we've seen over the last year, the industry is changing rapidly and the advent of tools like Cursor and Claude Code have changed the way we do our jobs. You are encouraged to use these tools as you would in your day-to-day work.

If you decide to use one of these tools, we'd love if you'd include a summary of your conversation with the tool as a markdown file.

Objectives

• Ensure all primary objectives on the "Planets" page within the app are completed.
• Ensure all primary objectives on the "Application" page within the app are completed.
• Ensure these commands pass successfully: (if they don't, you should probably fix them 😉)
  • npm run lint
  • npm run test -- watch=false
  • npm run type-check
  • npm run build

Getting Started & Setup

1. Create a private repository on your Github account called lightspeed.
2. Clone the zylo/lightspeed repo: git clone git@github.com:zylo/lightspeed.git.
3. Navigate into the project: cd lightspeed.
4. Change the upstream to your new private repo: git remote set-url origin git@github.com:your_github_name/lightspeed.git, replacing your_github_name with your own.
5. Run git push -u origin head on main.
6. Ensure that main now exists as the default branch in your private lightspeed repo.
7. Create your own code challenge branch: git checkout -b [whatever_you_want_to_name_your_branch].
8. In your local clone, run nvm use && npm i. Install the correct Node version if needed before proceeding.
9. Run npm run dev to start the app.

Submitting your work

When you're ready to submit your work, follow these instructions:

1. Invite Github users @grahamhency, @jawhitney, and @nteetszylo as collaborators in the settings of your private repo.
2. Push the commits to your code challenge branch of your private repo.
3. Open a pull request in your private repo comparing your code challenge branch against main, following the PR template guide.
4. Tag @grahamhency for review and reply to the original email we sent you regarding this challenge with the link to the PR, letting us know you're ready for us to look at it.
5. Congrats, you're done!

---

Good luck! ❤️