Lucas Barzan
💡 Google Keep Clone is a web notes app inspired by Google Keep, which aims to reproduce the main aspects and features of the famous application using ReactJS and Node.js.
- Responsive UI
- Signup and Login with user's e-mail and password
- User is able to search, create, update and delete notes
- Infinite scrolling (in the list of notes on the frontend)
- User is able to create tags (categories/labels) and associate them with notes
- User is able to list notes by tag
- User is able to customize the color of notes
- User is able to reset their password once they forget it
The Google Keep Clone layout brings several elements of the original application, as you can see in the screenshots below:
This project is divided into two parts:
- Backend ("server" folder)
- Frontend ("web" folder)
💡 The Frontend needs the Backend to be running in order to work properly.
Before you begin, you will need to have the following tools installed on your machine: Git, Node.js.
Also, it’s good to have an editor to work with the code like VSCode.
# Clone this repository
$ git clone [email protected]:lucasbarzan/google-keep-clone.git
# Access the project folder on your terminal/cmd
$ cd google-keep-clone
# Go to server folder
$ cd server
# Install the dependencies
$ npm install OR yarn
# Create a file with the database configs following the example file
# (you can change the values if needed)
$ cp ormconfig.example.json ormconfig.json
# Create a file with the environment variables following the example file
$ cp .env.example .env
# The app uses a MySQL database. If you don't have one yet, I recommend creating a mysql container using Docker.
# With Docker installed and running, execute the command below to create the "keep_clone" container
$ docker run --name keep_clone -e MYSQL_ROOT_PASSWORD=docker -p 3306:3306 -d mysql:8.0.22
# Create a database called "keep_clone" (or the name you gave in the settings).
# You can use a software like DBeaver to do this, for example.
# Run the database migrations
$ yarn typeorm migration:run
# The application uses a Redis database. If you don't have one yet, I recommend creating a redis container using Docker.
# With Docker installed and running, execute the command below to create the container "keep_clone_redis"
$ docker run --name keep_clone_redis -p 6379:6379 -d -t redis:alpine
# Run the application in development mode
$ npm run dev:server OR yarn dev:server
# The server will start on port 3333 - access http://localhost:3333
# Clone this repository (if you haven't already!)
$ git clone [email protected]:lucasbarzan/google-keep-clone.git
# Access the project folder in your terminal/cmd
$ cd google-keep-clone
# Go to the Frontend application folder
$ cd web
# Install the dependencies
$ npm install OU yarn
# Run the application in development mode
$ npm run start OU yarn start
# The application will start on port 3000 - access http://localhost:3000
The following tools were used in the construction of the project:
Website (React + TypeScript)
- React Router Dom
- Styled Components
- polished
- react-spring
- Axios
- query-string
- Unform
- create-react-app
- react-icons
- react-infinite-scroll-component
- react-modal
- yup
See package.json
Server (NodeJS + TypeScript)
- Express
- bcryptjs
- uuid
- jsonwebtoken
- celebrate
- handlebars
- class-transformer
- date-fns
- dotenv
- CORS
- mysql2
- TypeORM
- redis
- ioredis
- nodemailer
- aws-sdk
- helmet
- tsyringe
- Jest
- Sentry
See package.json
- Editor: Visual Studio Code
- API tests: Insomnia
- Fonts: Montserrat and Roboto
- Fork the project.
- Create a new branch with your changes:
git checkout -b my-feature - Save your changes and create a commit message describing what you did:
git commit -m" feature: My new feature " - Submit your changes:
git push origin my-feature
This project is under MIT license.
Made with ❤️ by Lucas Barzan 👋🏽