Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shreyamalogi/google-keep-clone
"🧙♀️ React Magic: Crafting a Google Keep App Clone ✨"
https://github.com/shreyamalogi/google-keep-clone
css html javascript react reactjs
Last synced: 26 days ago
JSON representation
"🧙♀️ React Magic: Crafting a Google Keep App Clone ✨"
- Host: GitHub
- URL: https://github.com/shreyamalogi/google-keep-clone
- Owner: shreyamalogi
- License: mit
- Created: 2022-01-26T12:31:32.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-29T12:20:18.000Z (about 1 year ago)
- Last Synced: 2024-10-03T19:41:58.435Z (about 1 month ago)
- Topics: css, html, javascript, react, reactjs
- Language: JavaScript
- Homepage: https://googlekeepnote.netlify.app/
- Size: 1.13 MB
- Stars: 15
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📷🌈 Google Keep Clone 💻
[](https://github.com/shreyamalogi/Google-Keep-Clone/stargazers)
### Project Details: 🌐📅✍️
- **Functionality:** A web application, a clone of Google Keep, developed using the React framework. 📝🔍
- **Tech Stack:** `React`, `JavaScript`, `HTML`, `CSS` 🚀💻
- **Author:** [@shreyamalogi](https://github.com/shreyamalogi/) 👩💻
- **Year of Project:** 2022 📅
- **Deployment:** The app is deployed to Netlify and can be accessed at [https://googlekeepnote.netlify.app/](https://googlekeepnote.netlify.app/).
---
# Table of Contents
1. [Introduction](#introduction)
2. [Challenges and Solutions](#challenges-and-solutions)
3. [Project Structure](#project-structure)
4. [How to Run](#how-to-run)
5. [How to Create from Scratch](#how-to-create-from-scratch)
6. [Contribution - Show Your Support](#contribution---show-your-support)
7. [License](#license)
## Introduction
Welcome to the Google Keep Clone, a web application crafted by **Shreya Malogi** using the powerful React framework. This project replicates the functionality of Google Keep, allowing users to create and manage notes seamlessly. 📑✨
## Challenges and Solutions
### 1. Responsive UI Design:
**Challenge:** Creating a visually appealing and responsive interface.
**Solution:** Utilized React's responsive design principles and CSS for seamless cross-device experiences. 🎨📱
### 2. State Management:
**Challenge:** Efficiently managing application state.
**Solution:** Implemented React hooks (e.g., useState, useEffect) and context API for effective state management. 🔄🧠
### 3. Material-UI Integration:
**Challenge:** Integrating Material-UI components for enhanced design.
**Solution:** Explored Material-UI documentation and integrated components to elevate the UI. 🚀✨
These challenges were addressed through thoughtful solutions, ensuring a polished and user-friendly Google Keep Clone. 🌐👩💻
## Project Structure
The project is organized into different directories, each serving a specific purpose:
- **`public`**: Contains static assets (icons, HTML file, etc.) that can be served publicly. 🖼️🌐
- **`src`**: The main source code directory.
- **`components`**: Contains React components that define the structure and behavior of the application. 🧩👩💻
- **`images`**: Stores images used in the application. 📷🌈
- **`styles`**: Holds CSS files for styling components. 🎨🖌️
## How to Run
1. **Clone the repository to your local machine:**
```bash
git clone https://github.com/shreyamalogi/Google-Keep-Clone.git
```
2. **Install dependencies:**
```bash
npm install
```
3. **Run the application in development mode:**
```bash
npm start
```
Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 🌐🚀
## How to Create from Scratch
If you're interested in understanding how this Google Keep Clone was created, you can refer to the following resources:
- [Guidelines and References](https://github.com/shreyamalogi/Google-Keep-Clone/blob/main/google%20keep%20app.pdf)
- [Overview](https://github.com/shreyamalogi/Google-Keep-Clone/blob/main/google%20keep%20overview.pdf) 📚📖
## Contribution - Show Your Support
Excited about web security spells? Contribute to this magical project and make it even more secure. Don't forget to star the project! ⭐🌟
## License
This project is enchanted under the spell of the MIT License. Share the magic responsibly! 🌍💙
MIT License
Copyright (c) 2022 Shreya Malogi
Stay Enchanted! 🧙♀️✨