diff --git a/README.md b/README.md index f5f04185..9a0a841f 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,13 @@ # Style Share + A simple web-based platform where users can easily create, explore, and share Tailwind CSS components and designs with fellow users. +## 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 @@ -9,27 +15,72 @@ A simple web-based platform where users can easily create, explore, and share Ta - Prisma + MongoDB - Tailwind -# Setting Up on your machine +## Screenshots + +![alt text](./screenshots/image.png) +![alt text](./screenshots/image-1.png) +![alt text](./screenshots/image-2.png) + +## Setting Up on your machine + 1. Go to the backend folder and create a .env file - ``` - DATABASE_URL="Mongodb Connection String here" - JWT_SECRET="secret" - PORT=3001 - ``` + ```plaintext + DATABASE_URL="Mongodb Connection String here" + JWT_SECRET="secret" + PORT=3001 + ``` 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. + + ```sh + 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: - https://github.com/VaibhavArora314/StyleShare/blob/ffb31d5bd3f68fbd76b300a736d56c2a0f1f77ac/frontend/src/App.tsx#L17-L18 + ```sh + 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](https://github.com/VaibhavArora314/StyleShare/blob/ffb31d5bd3f68fbd76b300a736d56c2a0f1f77ac/frontend/src/App.tsx#L17-L18) + +## How to Contribute + +We welcome contributions from the community! To contribute: + +1. Fork the repository. +2. Clone the repository. + ```sh + git clone https://github.com/VaibhavArora314/StyleShare.git + ``` +3. Create a new branch. + ```sh + git checkout -b your-branch-name + ``` +4. Make your changes. +5. Commit your changes. + ```sh + git commit -m 'Add some feature' + ``` +6. Push to the branch. + ```sh + git push origin your-branch-name + ``` +7. Open a pull request. + +## Our Contributors + +
+ +## License + +This project is licensed under the MIT License. See the [LICENSE](https://github.com/VaibhavArora314/StyleShare/blob/main/LICENSE) file for more details. diff --git a/screenshots/image-1.png b/screenshots/image-1.png new file mode 100644 index 00000000..47204423 Binary files /dev/null and b/screenshots/image-1.png differ diff --git a/screenshots/image-2.png b/screenshots/image-2.png new file mode 100644 index 00000000..584b2dd5 Binary files /dev/null and b/screenshots/image-2.png differ diff --git a/screenshots/image.png b/screenshots/image.png new file mode 100644 index 00000000..7f5c1ce0 Binary files /dev/null and b/screenshots/image.png differ