added readme structure

README.md

@@ -1,16 +1,262 @@
 <div align="center">
-  
-  <img src="assets/logo.png" alt="logo" />
-
-  <h1 align="center">Awesome Readme Template</h1>
 
-  <p align="center">
+  <img src="assets/logo.png" alt="logo" width="100" height="auto" />
+  <h1>Awesome Readme Template</h1>
+  
+  <p>
     An awesome README template for your projects! 
-    <br />
-    <a href="https://github.com/Louis3797/r3f-world-with-character/">View Demo</a>
-    ·
-    <a href="https://github.com/Louis3797/r3f-world-with-character/issues">Report Bug</a>
-    ·
-    <a href="https://github.com/Louis3797/r3f-world-with-character/issues">Request Feature</a>
   </p>
+  
+  
+  <!-- Badges -->
+  <p>
+  <a href="https://github.com/Louis3797/awesome-readme-template/graphs/contributors">
+    <img src="https://img.shields.io/github/contributors/Louis3797/awesome-readme-template" alt="contributors" />
+  </a>
+  <a href="https://github.com/Louis3797/awesome-readme-template/network/members">
+    <img src="https://img.shields.io/github/forks/Louis3797/awesome-readme-template" alt="forks" />
+  </a>
+  <a href="https://github.com/Louis3797/awesome-readme-template/stargazers">
+    <img src="https://img.shields.io/github/stars/Louis3797/awesome-readme-template" alt="stars" />
+  </a>
+  <a href="https://github.com/Louis3797/awesome-readme-template/issues/">
+    <img src="https://img.shields.io/github/issues/Louis3797/awesome-readme-template" alt="open issues" />
+  </a>
+  <a href="https://github.com/Louis3797/awesome-readme-template/blob/master/LICENSE.txt">
+    <img src="https://img.shields.io/github/license/Louis3797/awesome-readme-template" alt="license" />
+  </a>
+</p>
+   
+  <h4>
+    <a href="https://github.com/Louis3797/awesome-readme-template/">View Demo</a>
+  <span> · </span>
+    <a href="https://github.com/Louis3797/awesome-readme-template">Documentation</a>
+  <span> · </span>
+    <a href="https://github.com/Louis3797/awesome-readme-template/issues/">Report Bug</a>
+  <span> · </span>
+    <a href="https://github.com/Louis3797/awesome-readme-template/issues/">Request Feature</a>
+  </h4>
 </div>
+
+<br />
+
+#  Table of Content
+  <ul>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Bu</a></li>
+        <li><a href="#features">Features</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#usage">Usage</a></li>
+      <li><a href="#roadmap">Roadmap</a></li>
+        <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ul>
+  
+  
+## About the Project
+
+
+
+### Screenshots
+
+<div align="center"> 
+  <img src="https://placehold.co/600x400?text=Hello+World" alt="screenshot" />
+</div>
+
+
+### Tech Stack
+
+#### Client
+
+* [TypeScript](https://www.typescriptlang.org/)
+* [Next.js](https://nextjs.org/)
+* [React.js](https://reactjs.org/)
+* [TailwindCss](https://tailwindcss.com/)
+
+#### Server 
+
+* [TypeScript](https://www.typescriptlang.org/)
+* [Express.js](https://expressjs.com/)
+* [Golang](https://go.dev/)
+* [Nest.js](https://nestjs.com/)
+* [Socket.IO](https://socket.io/)
+* [Prisma](https://www.prisma.io/)
+* [Apollo](https://www.apollographql.com/)
+* [GraphQL](https://graphql.org/)
+
+#### Database
+
+* [MySQL](https://www.mysql.com/)
+* [PostgreSQL](https://www.postgresql.org/)
+* [Redis](https://redis.io/)
+* [Neo4j](https://neo4j.com/)
+* [MongoDB](https://www.mongodb.com/)
+
+#### DevOps
+
+* [Jenkins](https://www.jenkins.io/)
+* [Docker](https://www.docker.com/)
+* [CircleCI](https://circleci.com/)
+
+
+### Features
+
+- Feature 1
+- Feature 2
+- Feature 3
+
+### Color Reference
+
+| Color             | Hex                                                                |
+| ----------------- | ------------------------------------------------------------------ |
+| Primary Color | ![#0a192f](https://via.placeholder.com/10/0a192f?text=+) #0a192f |
+| Secondary Color | ![#f8f8f8](https://via.placeholder.com/10/f8f8f8?text=+) #f8f8f8 |
+| Accent Color | ![#00b48a](https://via.placeholder.com/10/00b48a?text=+) #00b48a |
+| Text Color | ![#000000](https://via.placeholder.com/10/000000?text=+) #000000 |
+
+
+### Environment Variables
+
+To run this project, you will need to add the following environment variables to your .env file
+
+`API_KEY`
+
+`ANOTHER_API_KEY`
+
+
+## Getting Started
+
+### Prerequisites
+
+This project uses Yarn as package manager
+
+```bash
+ npm install --global yarn
+```
+
+### Installation
+
+Install my-project with npm
+
+```bash
+  yarn install my-project
+  cd my-project
+```
+    
+### Running Tests
+
+To run tests, run the following command
+
+```bash
+  yarn test test
+```
+
+
+### Run Locally
+
+Clone the project
+
+```bash
+  git clone https://github.com/Louis3797/awesome-readme-template.git
+```
+
+Go to the project directory
+
+```bash
+  cd my-project
+```
+
+Install dependencies
+
+```bash
+  yarn install
+```
+
+Start the server
+
+```bash
+  yarn start
+```
+
+
+### Deployment
+
+To deploy this project run
+
+```bash
+  yarn deploy
+```
+
+
+## Contributing
+
+Contributions are always welcome!
+
+See `contributing.md` for ways to get started.
+
+Please adhere to this project's `code of conduct`.
+
+### Code of Conduct
+
+Please read the [Code of Conduct](https://github.com/Louis3797/awesome-readme-template/blob/master/CODE_OF_CONDUCT.md)
+
+
+## Usage/Examples
+
+```javascript
+import Component from 'my-project'
+
+function App() {
+  return <Component />
+}
+```
+
+## Roadmap
+
+* [ ] Additional browser support
+
+* [ ] Add dark mode
+
+
+## FAQ
+
+#### Question 1
+
+Answer 1
+
+#### Question 2
+
+Answer 2
+
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)
+
+
+## Contact
+
+Your Name - [@twitter_handle](https://twitter.com/twitter_handle) - email@email_client.com
+
+Project Link: [https://github.com/Louis3797/awesome-readme-template](https://github.com/Louis3797/awesome-readme-template)
+
+## Acknowledgements
+
+ - [Awesome Readme Templates](https://awesomeopensource.com/project/elangosundar/awesome-README-templates)
+ - [Awesome README](https://github.com/matiassingers/awesome-readme)
+ - [How to write a Good readme](https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project)
+
+
+
+<!-- Links -->