This is a basic demo, using the public Bob's Burgers API:
https://bobs-burgers-api-ui.herokuapp.com/
It lists characters and episodes.
This project was bootstrapped with Create React App.
Live Demo: https://bobs-burgers-demo.web.app/
Component Library: https://bobs-burgers-storybook.web.app/
- clone the repo:
git clone [email protected]:jblossomweb/bobs-burgers-demo.git - navigate to directory:
cd bobs-burgers-demo - install dependencies:
yarn - start dev server:
yarn start - open your browser to http://localhost:3000
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Runs the test runner once in CI mode (no colors).
See the section about running tests for more information.
Runs the test runner once, and generates a coverage report.
See the section about running tests for more information.
Runs the linter from the command line.
Runs storybook in dev mode.
Open http://localhost:6006 to view it in the browser.
The page will reload if you make edits.\
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Builds the storybook for production to the .storybook/build folder.
Your storybook is ready to be deployed!
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
To learn Storybook, check out the Storybook documentation.
To learn TailwindCSS, check out the Tailwind documentation.
To learn Typescript, check out the Typescript documentation.
This code sample will be used to evaluate your understanding of foundational frontend concepts and as a way for you to demonstrate your coding style, approach to application architecture, and implementation of product requirements. You will be asked to describe your work in the live interview and discuss the decision making behind your approach.
There are no "gotchas" in this exercise. The only things we are looking for are listed below.
Please create a web app that uses a public api to display a list of entities. When an individual entity is clicked on, navigate to a separate URL that displays more details about that entity. This app should have a fixed navigation containing a link that returns the user to the list view.
This app should:
- Use React and TypeScript. Using tools such as Next.js or Create React App will not positively or negatively affect your evaluation. Please use them if you feel it will save you time.
- Implement a routing solution of your choice.
- Unit test multiple files. Complete coverage isn't necessary, but there should be a large enough sample size to demonstrate your approach to writing unit tests. Roughly 30% coverage should be plenty. Less than that is fine if you feel it still represents your approach well.
- Use any and all other dependencies that are useful to you.
Implement a design of your choice. Use whatever style solution you prefer. You will not be judged on how pretty the application is.
Your style implementation should:
- Demonstrate a consistent ideology when it comes to naming and structure.
- Allow individual components to be modular and reused easily in various contexts.
- Show a solid understanding of different display and positioning types (i.e. use flexbox).
- Be detail oriented and intentional in how spacing is applied to individual elements. Make sure your padding and margins are interacting as you intend them to.
- Respond to different browser widths.
- Look and function similarly on Chrome, Firefox, and Safari. Slight differences are fine.
Please put your project on GitHub and provide a link to your contact at Bitly. Please include a README describing how to install and run your app.