Googlekeepclone
A clone of Google Keep with its original Material Design aesthetics
Overview:
This product is a clone of Google Keep, written in ReactJS with Material UI components. It aims to mimic the design and features of Google Keep, with additional functionalities like sharing, archiving, reminders, etc. The backend is implemented using a GraphQL server written in Golang, with data persisted in an SQLite DB file. Authentication is implemented using Cookie based Authentication with Authboss. The product also offers a light and dark theme.
Features:
- Login & Register for creating a new user
- Colors, Sizes, Margins, Paddings, etc., matches exactly that of Google Keep's Web App
- Responsive Design - Adapts to all screen sizes from mobile screens up to 4k displays
- Dark Mode - Dynamically change between light and dark theme
- Notes - Create, Update, Copy, Delete items on the fly. Dynamically change between two modes: simple notes and todos with checkboxes
- Colors - Assign colors to notes and adapt to dark/light theme
- Display Mode - Notes can appear in the canvas in two different modes: List or Tile
- Labels - Label your notes, assign/unassign labels dynamically, and filter notes by selected labels
- Subscriptions - When notes are created/deleted in different browser tabs, the updates are pushed from the server to the client
Summary:
This product is a Clone of Google Keep, implemented using ReactJS and Material UI components. It offers a range of features including login/register functionality, responsive design, dark mode, notes management, color assignment, display modes, labels, and subscriptions. The backend is implemented in Golang with GraphQL, and the theme can be installed by cloning the repository and running the server and frontend.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Material UI
material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Material Design
Material Design is a design system developed by Google that provides a set of guidelines, components, and tools for creating visually appealing and functional user interfaces. Material Design is designed to be flexible and customizable, making it a great choice for a wide range of applications and use cases.