Update README.md

README.md

@@ -1,36 +1,54 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# README for Real Estate Web App (tpigl)
 
-## Getting Started
+## Introduction
 
-First, run the development server:
+This project is a real-estate web application built with Next.js and TypeScript. 
 
-```bash
-npm run dev
-# or
-yarn dev
-```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Screenshots
+![alt text](https://github.com/IslemMedjahdi/real-estate-web-app-tpigl/blob/main/screenshots/Screenshot0.png?raw=true)
+![alt text](https://github.com/IslemMedjahdi/real-estate-web-app-tpigl/blob/main/screenshots/Screenshot1.png?raw=true)
+![alt text](https://github.com/IslemMedjahdi/real-estate-web-app-tpigl/blob/main/screenshots/Screenshot2.png?raw=true)
+![alt text](https://github.com/IslemMedjahdi/real-estate-web-app-tpigl/blob/main/screenshots/Screenshot3.png?raw=true)
+![alt text](https://github.com/IslemMedjahdi/real-estate-web-app-tpigl/blob/main/screenshots/Screenshot4.png?raw=true)
+
+
+## Technologies
+- Next.js: A popular React-based framework for building server-rendered apps.
+- TypeScript: A statically typed superset of JavaScript that adds optional type annotations and other features.
+- React: A JavaScript library for building user interfaces.
+- Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
+- Axios: A popular HTTP client for making API requests.
+- Leaflet: An open-source JavaScript library for building maps.
+
+## Code
+The code is organized into a set of React components and pages, with each component responsible for rendering a specific part of the user interface. The code is written in TypeScript, with type annotations added to ensure type safety and catch errors early in development. The styling is done using Tailwind CSS, with custom styles added as needed. The app makes API requests using Axios and displays maps using Leaflet.
+
+## Installation
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+To run this project, you need to have [Node.js](https://nodejs.org/en/) installed on your system. To install Node.js, follow the instructions on their website.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+You also need to have [Yarn](https://yarnpkg.com/getting-started) installed on your system. To install Yarn, follow the instructions on their website.
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## Running the project
 
-## Learn More
+To run this project, you need to run the backend from this repo: [IGL-Backend](https://github.com/mohph197/IGL-Backend).
 
-To learn more about Next.js, take a look at the following resources:
+Once you have the backend running, you need to set the .env.local file with the appropriate environment variables.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+After setting the .env.local file, you can run the project by using the following commands:
+
+```
+yarn
+```
+```
+yarn dev
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-## Deploy on Vercel
+This will start the development server, and you can view the project in your browser at http://localhost:3000.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Note
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+This is just the front-end part of the real-estate web application. To run the full application, you need to have the backend running as well.