Skip to content

shreyamalogi/Google-Keep-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

15 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“·πŸŒˆ Google Keep Clone πŸ’»

GitHub stars

Project Details: πŸŒπŸ“…βœοΈ

  • Functionality: A web application, a clone of Google Keep, developed using the React framework. πŸ“πŸ”
  • Tech Stack: React, JavaScript, HTML, CSS πŸš€πŸ’»
  • Author: @shreyamalogi πŸ‘©β€πŸ’»
  • Year of Project: 2022 πŸ“…
  • Deployment: The app is deployed to Netlify and can be accessed at https://googlekeepnote.netlify.app/.

Table of Contents

  1. Introduction
  2. Challenges and Solutions
  3. Project Structure
  4. How to Run
  5. How to Create from Scratch
  6. Contribution - Show Your Support
  7. 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:

    git clone https://github.com/shreyamalogi/Google-Keep-Clone.git
  2. Install dependencies:

    npm install
  3. Run the application in development mode:

    npm start

    Open 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:

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! πŸ§™β€β™€οΈβœ¨

About

"πŸ§™β€β™€οΈ React Magic: Crafting a Google Keep App Clone ✨"

Topics

Resources

License

Stars

Watchers

Forks