Shop Management — React App

👁️ Project Preview

Live Preview 👉 https://shop-management-nu.vercel.app//

📝 Project Description & features

This project involves developing a single-page React.js application that manages a list of shops. The application integrates with Firebase Firestore for data storage and use Material-UI (MUI) components for the user interface. Additionally, this project utilizes Recoil, a state management library to handle state logic in the application.

• Firestore Powered: Stores shop data efficiently in real-time using Firebase Firestore.
• Visual Shop Management: Displays a grid of shops with add, edit, and delete functionalities.
• Interactive Map: Features a map showing shop locations, updating dynamically with changes.
• User-Friendly Shop Creation/Editing: Offers an intuitive modal with autocomplete and map integration for easy data entry.
• Seamless Location Setting: Allows setting shop locations either by clicking on the map or typing in the autocomplete field, ensuring accuracy and consistency.
• Recoil for Clean Code: Manages complex state logic efficiently using Recoil, promoting code maintainability.

🛠️ Project Tools

• TypeScript
• React.js
• Material-UI
• React Router Dom
• React Hooks
• Recoil (state management library)
• Google Api

✨ Project Skills applied

Front-End:

• React (TypeScript): A core framework for building the UI, utilizing TypeScript's type safety and tooling.
• HTML/CSS: Markup and styling for the application's structure and visual presentation.
• TypeScript: Superset of JavaScript providing type checking and improved code maintainability.
• Google Maps API: Used to integrate and manage the map component.
• Recoil: State management library for organizing and sharing application state.
• React Hook Form: Form library for handling form state, validation, and submission.
• Zod: Schema validation library for enforcing data types and constraints.

Back-End:

• Firebase Firestore.

Additional Skills:

• Geocoding: Converting addresses to coordinates for map placement.
• Autocomplete: Implementing suggestions for location input.

Soft Skills:

• Problem-Solving: Ability to identify and address technical challenges.
• Organization: Structuring code and project files for maintainability.
• Attention to Detail: Ensuring accuracy and consistency in features.
• User Experience (UX) Design: Creating intuitive and user-friendly interfaces.

How to run the app locally?

To run the app locally,

• First fork and clone the repository.
• Then change to the directory where the repository is cloned.
• Run npm install to install the dependencies.
• Run npm run dev to run the application.

👋 Get In Touch

• 🌐 Website 👉 https://khaledellithy-portfolio.vercel.app/
• 👔 LinkedIn 👉 https://www.linkedin.com/in/khaledashrafellithy/
• 🌟 Github 👉 https://github.com/KhaledEllithy310
• 📧 Email 👉 khaledellessy310@gmail.com
• ☎️ Whatsapp 👉 (+20) 112-461-2043

2024 © Khaled Ellithy

---