This React app was created by Tim (@ziir on GitHub, @tpillard on Twitter) as an exercise for a Senior Front-End Developer hiring process.
Read the ~live-tweeted process for building this app.
View the screenshots (unsorted, uncommented) illustrating the different steps of the development process.
- Viewing the list notes (title only)
- Create notes with a plaintext title, markdown content
- View a note, with the markdown content parsed and rendered
- Edit a note
- Delete a note
- React
- React.useEffect
- React.useState
- React.useReducer
- Lifting State Up
- React Context API
- Uncontrolled Components
- Render Props
Notes are persisted to local storage.
The app uses a custom Router for React apps, built on a-route.
See App.js for an example of routes definition & rendering.
See Router module for more information.
Markdown content is parsed & rendered using snarkdown, a minimal Markdown parser.
This project was developped with the goal of having few, light & fast dependencies - outside of the ones provided by the bootstrapping.
This project presents a src/components directory, it contains mostly single-use components used in the app.
This project presents a src/modules directory, it contains re-usable logic, utilities & components, some of which could hypothetically be useful in other projects and be extracted, maintained, distributed as their own packages.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Install dependencies from `package-lock.json.
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.
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.