Update README.md

Author: ladunjexa

README.md

@@ -1,2 +1,229 @@
-# GPT4-Summarizer-Web
-This repository houses an well-designed Article Summarizer Web Application using OpenAI's GPT-4 model - built with React & Redux.js powered by Rapid API 📄
+<a name="readme-top"></a>
+<div align="center">
+
+  ![Project Banner](readme_assets/readme_banner.png#gh-dark-mode-only)
+  ![Project Banner](readme_assets/readme_banner-light.png#gh-light-mode-only)
+
+  <h1>GPT-4 Summarizer Web</h1>
+  
+  <p>
+    well-designed article summarizer web application using openAI's GPT-4 model powered by Rapid API - built with React & Redux.js
+  </p>
+
+<!-- Badges -->
+<p>
+  <a href="https://github.com/ladunjexa/GPT4-Summarizer-Web/graphs/contributors">
+    <img src="https://img.shields.io/github/contributors/ladunjexa/GPT4-Summarizer-Web" alt="contributors" />
+  </a>
+  <a href="">
+    <img src="https://img.shields.io/github/last-commit/ladunjexa/GPT4-Summarizer-Web" alt="last update" />
+  </a>
+  <a href="https://github.com/ladunjexa/GPT4-Summarizer-Web/network/members">
+    <img src="https://img.shields.io/github/forks/ladunjexa/GPT4-Summarizer-Web" alt="forks" />
+  </a>
+  <a href="https://github.com/ladunjexa/GPT4-Summarizer-Web/stargazers">
+    <img src="https://img.shields.io/github/stars/ladunjexa/GPT4-Summarizer-Web" alt="stars" />
+  </a>
+  <a href="https://github.com/ladunjexa/GPT4-Summarizer-Web/issues/">
+    <img src="https://img.shields.io/github/issues/ladunjexa/GPT4-Summarizer-Web" alt="open issues" />
+  </a>
+  <a href="https://github.com/ladunjexa/GPT4-Summarizer-Web/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/ladunjexa/GPT4-Summarizer-Web.svg" alt="license" />
+  </a>
+</p>
+   
+ <h4>
+    <a href="https://gpt-4-summarizer-web.vercel.app/">View Demo</a>
+  <span> · </span>
+    <a href="https://github.com/ladunjexa/GPT4-Summarizer-Web">Documentation</a>
+  <span> · </span>
+    <a href="https://github.com/ladunjexa/GPT4-Summarizer-Web/issues/">Report Bug</a>
+  <span> · </span>
+    <a href="https://github.com/ladunjexa/GPT4-Summarizer-Web/issues/">Request Feature</a>
+  </h4>
+</div>
+
+<br />
+
+<!-- Table of Contents -->
+<details>
+
+<summary>
+
+# :notebook_with_decorative_cover: Table of Contents
+
+</summary>
+
+- [About the Project](#star2-about-the-project)
+  * [Folder Structure](#bangbang-folder-structure)
+  * [Tech Stack](#space_invader-tech-stack)
+- [Getting Started](#toolbox-getting-started)
+  * [Environment Variables](#key-environment_variables)
+  * [Installation](#gear-installation)
+  * [Run Locally](#running-run-locally)
+- [Contributing](#wave-contributing)
+- [License](#warning-license)
+- [Contact](#handshake-contact)
+- [Acknowledgements](#gem-acknowledgements)
+
+</details>  
+
+<!-- About the Project -->
+## :star2: About the Project
+
+<div align="center">
+  <img src="readme_assets/mock.png" height="auto" width="90%"/>
+</div>
+
+This repository houses a well-designed Article Summarizer Web Application built with React & Redux.js using OpenAI's GPT-4 model powered by Rapid API 🤖
+
+<!-- Folder Structure -->
+### :bangbang: Folder Structure
+
+Here is the folder structure of GPT4 Summarizer Web.
+```bash
+GPT4-Summarizer-Web/
+|- public/
+|- src/
+  |-- assets/
+    |-- {...}.svg
+    |-- index.js
+  |-- components/
+    |-- Demo.jsx
+    |-- Hero.jsx
+    |-- index.js
+  |-- services/
+    |-- article.js
+    |-- store.js
+  |-- App.css
+  |-- App.jsx
+  |-- main.jsx
+|- .env
+|- .eslintrc.cjs
+|- index.html
+|- package.json
+|- postcss.config.js
+|- tailwind.config.js
+|- vite.config.js
+```
+<br />
+
+<!-- TechStack -->
+### :space_invader: Tech Stack
+
+[![My Skills](https://skillicons.dev/icons?i=vite,react,tailwind,redux)](https://skillicons.dev)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- Getting Started -->
+## :toolbox: Getting Started
+
+<!-- ENV VARIABLES -->
+### :key: Environment Variables
+
+In order to use this GPT4 Summarizer Webapp you have to add some environment variables to .env file,
+
+##### _client-side_ [/.env]
+
+create `.env` file in root folder & add the following environment variable:
+```env
+VITE_RAPID_API_KEY=<RAPID_API_KEY>
+```
+
+<!-- Installation -->
+### :gear: Installation
+
+#### Step 1:
+Download or clone this repo by using the command below:
+
+```bash
+ https://github.com/ladunjexa/GPT4-Summarizer-Web.git
+```
+
+#### Step 2:
+
+This webapp using NPM (Node Package Manager), therefore, make sure that Node.js is installed by execute the following command in console:
+
+```bash
+  node -v
+```
+
+#### Step 3:
+
+In root folder execute the following command to get the required packages:
+
+```bash
+  npm install
+```
+
+<!-- Run Locally -->
+### :running: Run Locally
+
+#### Step 1:
+
+Go to root folder and execute the following command in order to run the webapp:
+
+```bash
+  npm run dev
+```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- Contributing -->
+## :wave: Contributing
+
+<a href="https://github.com/ladunjexa/GPT4-Summarizer-Web/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=ladunjexa/GPT4-Summarizer-Web" />
+</a>
+
+
+Contributions are always welcome!
+
+See [`contributing.md`](https://contributing.md/) for ways to get started.
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- License -->
+## :warning: License
+
+Distributed under the MIT License. See [LICENSE.txt](https://github.com/ladunjexa/GPT4-Summarizer-Web/blob/main/LICENSE) for more information.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- Contact -->
+## :handshake: Contact
+
+Liron Abutbul - [@lironabutbul6](https://twitter.com/lironabutbul6) - [@ladunjexa](https://t.me/ladunjexa)
+
+Project Link: [https://github.com/ladunjexa/GPT4-Summarizer-Web](https://github.com/ladunjexa/GPT4-Summarizer-Web)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- Acknowledgments -->
+## :gem: Acknowledgements
+
+This section used to mention useful resources and libraries that used in the GPT4 Summarizer Webapp:
+
+#### client-side
+
+- [Vite.js](https://vitejs.dev/)
+- [React](https://react.dev/)
+- [Redux Toolkit](https://redux-toolkit.js.org/)
+- [React Redux](https://react-redux.js.org/)
+- [TailwindCSS](https://tailwindcss.com/)
+- [Rapid API](https://rapidapi.com/)
+- [Google Fonts](https://fonts.google.com/)
+- #JSMastery
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>