StyleShare

<a id="top"></a>

<div style="display:none;" align="center"> <h1><font size="10"> Style Share </font></h1> <!-- repo intro --> </div> <div align="center"> <h3><font size="4">A simple web-based platform where users can easily create, explore, and share Tailwind CSS components and designs with fellow users.</h3> <br> Make sure you star the repository and show your love to us💗 </font> <br> <br> <p>

Why to Open Source

Contributing in open source increases your opportunities to work with different projects and mentors, getting to know various insights and ideas. It is a platform where contributors grow together with a construvtive and a positive attitude. This repository also provides one such platforms where contributers come over and put their ideas and make our website as interactive as much they can!

<table> <tr> <th>Event Logo</th> <th>Event Name</th> <th>Event Description</th> </tr> <tr> <td><img src="https://user-images.githubusercontent.com/63473496/213306279-338f7ce9-9a9f-4427-8c2a-3e344874498f.png#gh-dark-mode-only" width="200" height="auto" loading="lazy" alt="GSSoC 24"/></td> <td>GirlScript Summer of Code 2024</td> <td>GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development. </tr> </table>

</p> </div> <details> <summary><h2>:pushpin:Table of Contents: </h2></summary>

1. Project Description
2. TechStack
3. Screenshots
4. Video
5. Code of Conduct
6. Setting Up on your machine
7. How to Contribute
8. Our Contributors
9. License

</details> <hr>

Project Description

Style Share is a collaborative platform designed to streamline the process of creating and sharing Tailwind CSS components. Users can explore a wide range of design components created by the community, contribute their own, and engage with fellow designers and developers to enhance their web development projects.

TechStack

• TypeScript
• Express
• React
• Recoil
• Prisma + MongoDB
• Tailwind

<hr> <details> <summary><h2>📷 Screenshots: </h2></summary>

</details>

Video

https://github.com/VaibhavArora314/StyleShare/assets/142779809/bb8969a2-90b2-431a-b95a-a87df61bb39a

<!-- Code of conduct --> <div> <h2><img src = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Handshake.png" width="35" height="35"> Code of Conduct</h2> </div>

Please note that this project is released with a Code of Conduct. By participating in this project you agree to abide by its terms.

Setting Up on your machine

1. Go to the backend folder and create a .env file similar to .env.example

<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setup .env file</h4>

       I. DATABASE_URL="mongodb+srv://<username>:<password>@<cluster-name>/syleshare" (replace <username>, <password>, and <cluster-name> with your actual MongoDB credentials)

       II. JWT_SECRET="secret"

       III. PORT=3001

       IV. EMAIL_USER=example@gmail.com (replace with your actual email address)

       V. EMAIL_PASS=lmkgpafolrjudvpc (16-digit password generated in Google, change this with yours)

       VI. SEND_EMAIL=true (If you set it true ,you can able to send email otherwise it wont send)

       VII. API_KEY="your google gemini api key" (replace with your actual Google Gemini API key)

<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; For getting EMAIL_PASS</h4>

       I.EMAIL_PASS Generation video link

       II.Remove spaces and add the password

2. Run the following commands in the backend folder

   npm install
   npm run build
   npm run dev
   

   The npm run build cmd will handle the Prisma migrations, and also build the frontend folder which will be served by the express server.

   Possible Problems:

   • Prisma may give error for MongoDB replica set, in such case use Mongodb atlas for the database instead of the local database or start a Mongo docker container with the replica set.

3. In case you are modifying the frontend and you want hot module reloading, then run the following commands in the frontend directory

   npm install
   npm run dev
   

   Also, set the default base URL of the backend (don't push this to GitHub) or simply uncomment the following: App.tsx lines 17-18

<hr> <details> <summary><h2>:sparkles:How to Contribute</h2></summary>

We welcome contributions from the community! To contribute:

1. Fork the repository.
2. Clone the repository.

   git clone https://github.com/VaibhavArora314/StyleShare.git
   

3. Create a new branch.

   git checkout -b your-branch-name
   

4. Make your changes.
5. Commit your changes.

   git commit -m 'Add some feature'
   

6. Push to the branch.

   git push origin your-branch-name
   

7. Open a pull request.

</details> <hr> <div> <h2><img src="https://github.com/Meetjain1/wanderlust/assets/133582566/90f3930e-5a12-4a4e-8ac9-0dc7d5396adb" width="35" height="35">Are Ready to Contribute?</h2> </div>

If you would like to contribute to the project then kindly go through Contributing Guidelines to understand everything from setup to necessary instructions.

<hr> <h2 align = "center">Our Contributors ❤️</h2> <div align = "center"> <h3>Thank you for contributing to our repository</h3> <p><a href="https://github.com/VaibhavArora314/StyleShare/contributors"> <img src="https://contributors-img.web.app/image?repo=VaibhavArora314/StyleShare" /> </a></p> </div> <hr> <!-- License --> <div> <h2><img src = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Page%20with%20Curl.png" width="35" height="35"> License:</h2> </div>

This project is licensed under the MIT License. See the LICENSE file for more details.

<hr> <div> Don't forget to leave a star<img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f31f/512.webp" width="35" height="30"> for this project! </div> <br>

<a href="#top" style="position: fixed; bottom: 20px; right: 20px; background-color: black ; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; border-radius: 5px; font-family: Arial; font-size: 16px;">Go to Top</a>