Ritual Frontend/Fullstack Home Exercise

How to run

1. Run the backend for the app. (See README.md file in backend folder)
2. Install dependencies yarn install
3. Run the development server npm start

Exercise description

Hi there!
In this exercise you will create a basic notetaker. The task's main purpose is to understand your ability to learn, design, develop new topics and deliver high quality digital products. It combines building UI components and a touch of server development as well.

The basic knowledge required to complete this task is the following subjects:

• JavaScript/Typescript
• HTML & CSS
• React
• Node.js/Python

Basic Requirements:

1. Single page application
2. Basic webserver with a SQL/NOSQL DB behind the scene (Only for Fullstack position)

Tasks

The exercise is split into 3 parts. The first part is about adding UI functionality. The second part goes a bit broader into the client-server integration and business logic. The third part is about creativity and good "big-picture" intuition.

EmptyNote that 1d and 2c are bonus tasks

Part 1 - Create a basic NoteTaker

1. Client Side : Develop the basic wireframe (FIGMA Link in resources) for the notetaker, add basic functionallity to write note (basic text, titles, list etc.)

   1. Use known package as possible to increase speed of implementation. don't need to invent stuff that are already maintained.
   2. Remember to use latest implementation standards like function components and hooks
   3. Use linter and write the code in a structure way to be easly maintained

2. Only for those who have Backend experience - Server-Client Side: Develop a way to save and show saved notes

   1. Use basic standard REST api
   2. Create api to get all notes, save current note, update note on changes

3. Bonus - Template section (also design exist in FIGMA link): We think about creating a template mechanism that will help shorten things out, like pre ahead notes headers. In order to accomplish this we need to the next abilities:

   1. Create Template
   2. Save Template
   3. Select specific template when creating new note

Part 2 - Search & Keybinding functionality

1. Being able to search specific text in the different notes exist is a crutial part of utilize the note usablilty
   1. Add Search toolbox and by a specific pharse search the notes and show the relevant notes that meet the result, being able to select them
   2. Bonus - Add the ability by a combination of cmd/ctrl+c and cmd/ctrl+v to select specific text and paste it in a different note with the same design

Part 3 Bonus - Your extra touch

Think of a small addition to this project and make it happen. It should involve adding something to the UI, or server (or both!). A good rule of thumb for the effort here is that it should not exceed the time that it took you to perform Part 2.
Please describe the feature you've added on your email back to us

Resources

• Figma Link:
• https://www.figma.com/file/eiP612xWGmClYBf27kcrqJ/Home-Exe?node-id=0%3A1

General notes

• Test your work well. Think of edge cases. Think of how users will use it, and make sure your work is of high quality
• Stick to the best practices of the libraries used as much as possible
• If you have any questions regarding the task itself or its environment, feel free to ask via e-mail. For general coding / technology questions, please consult stack overflow, forums and other sources of your choice.

Submitting

1. Send back by email
2. Delete any node_modules directory from the project.
3. Zip the root directory.
4. You can describe your extra touch (part 3), and any general notes you may have. Can be anything from challenges to something you feel was not done perfect, to something you're specially proud of.