Code Monkey home page Code Monkey logo

styleshare's Introduction

Style Share

A simple web-based platform where users can easily create, explore, and share Tailwind CSS components and designs with fellow users.


Make sure you star the repository and show your love to us💗

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!

Event Logo Event Name Event Description
GSSoC 24 GirlScript Summer of Code 2024 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.

GitHub issues GitHub forks GitHub pull requests GitHub Repo stars GitHub contributors

📌Table of Contents:

  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

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

📷 Screenshots:

alt text alt text alt text alt text alt text alt text alt text alt text alt text alt text alt text alt text

Video

preview.mp4

Code of Conduct

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

      setup .env file

       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 protected] (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)

      For getting EMAIL_PASS

       I.EMAIL_PASS Generation video link

       II.Remove spaces and add the password

  1. 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.
  2. 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


✨How to Contribute

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.

Are Ready to Contribute?

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


Our Contributors ❤️

Thank you for contributing to our repository


License:

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


Don't forget to leave a star for this project!

Go to Top

styleshare's People

Contributors

akbatra567 avatar aslams2020 avatar asmitamishra24 avatar asthanegi14 avatar asymtode712 avatar chaanakyaam avatar hemashree21 avatar its-kumar-yash avatar joyosmit avatar kushalkumar1362 avatar manikumarreddyu avatar mansi02-sadanand avatar mastansayyad avatar meetdod avatar pani2004 avatar parth18shah avatar poseidonsanket avatar prabhatyadav60 avatar r7projects-shayan avatar rohitha-pudu avatar root-0101 avatar sailesh3000 avatar saurabhbakolia avatar sivaprasath2004 avatar tonystark-47 avatar ultimateutkarsh11 avatar utsavladia avatar vaibhav-kesarwani avatar vaibhavarora314 avatar zalabhavy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

styleshare's Issues

Pagination in Style Share

image

To improve user experience and maintain the frontend's performance, we need to implement pagination in the app. The proposed approach is to load posts in batches of 9, requiring the user to navigate between pages to access additional posts.

Task:

Implement Pagination Logic:

  • Load posts in sets of 9.
  • Add navigation controls to switch between pages.
  • Ensure that when a user reaches the end of a set of 9 posts, they can easily move to the next set or return to previous sets.

Update Frontend:

  • Designing and integrating pagination controls (e.g., next/previous buttons, page numbers).

Maintain Frontend Performance:

  • Optimize the loading of posts to ensure quick response times.

Assign me so that i can start work as soon as possible.
Thank You

Improve UI of Sign In page

The UI of sign in page is not very appealing . i would like yo re-design it.
Screenshot 2024-06-01 143346

I will correct the alignment of buttons and add a heading and try to improve the overall UI as well as UX

Kindly assign me this issue.
Best regards

[Feat]: Auto Commenting Feat for Issue Creation

This feature aims to address the problem of delayed and inconsistent communication following the creation of issues. By automatically commenting on issues as soon as they are created, it ensures that contributors receive immediate feedback and acknowledgment for their efforts. This fosters a positive and supportive environment for collaboration, encouraging continued participation and engagement from contributors.

issue creation

Enhance Profile Page

Currently, there is no styling on the profile page. Add some styling so that the page looks better. Show proper handling of verification otp and generation/regeneration of otp.
image

image

image

[Feat]: Auto Commenting feature for PR Raised

This feature aims to address the problem of delayed and inconsistent communication following the raising of PRs. By automatically commenting on PRs as soon as they are raised, it ensures that contributors receive immediate feedback and acknowledgment for their efforts. This fosters a positive and supportive environment for collaboration, encouraging continued participation and engagement from contributors.

PR raised

Google Sign Up Feature Implementation and Re-Designing the Sign up and Login Form

Describe the bug
Hello @VaibhavArora314 as we can see If we visit the home page of the website and go to the Sign form then we can see that there is no functionality for signing in with another platform such as Google, LinkedIn, Facebook and Github, etc.

To Reproduce
Steps to reproduce the behavior:

  • Open the home page at https://style-share.vercel.app/app
  • Open the Sign in and Sign up form
  • Observe the design and absence of Sign with Google and another platform in the Signup form.
  • I want to Introduce this feature

Expected behavior
Implementing Sign up functionality by Google and many other platforms and improving the design of sign-up and Login
image

Screenshots
Before the problem is that there is no feature of Sign in or Login with Google.
image

Hey PA,
I want to work on this issue once you assign me under GSSoC'24 and please assign level 3 to this issue 🙏. Thank You!

No verification of user's email via OTP

When user signs up, there is no verification being done whether the email is their's or not.
We need to send a OTP to the user for this.

Vite.+.React.+.TS.-.Google.Chrome.2024-05-27.22-16-05.mp4

Obviously, no such email as the one entered here exists as the one entered above.

Improving footer UI

There is so much empty space in footer , so it looks incomplete.
image
I would like to modify the content in footer , reduce the height , make links clickable and add some more social media icons in footer.

Please assign me this issue, i would like to contribute to this project under GSSoC'24.

[Feat]: Auto Commenting feature for PR Merged

This feature aims to solve the problem of inconsistent and delayed communication following the merging of PRs. By automating the commenting process, it ensures that contributors receive timely feedback and acknowledgments. It also reduces the administrative burden on maintainers, allowing them to focus more on code reviews and other critical tasks.

PR merged

Improvement of sign up page

Screenshot 2024-06-01 143619
The headings are very light in color and these is no title in the card.
I will also add a parallax effect to enhance the user interaction

Implement Google Signup Functionality

Users should be able to sign up using their Google tokens for authentication.

This feature enhances user convenience by allowing them to sign up using their Google accounts, reducing the need to remember additional login credentials.

Screenshots
Actual:
image

Expected :
image

Could you please Assign this issue to me under gssoc

Add About Page

I want to design an About page to highlight the important features of the website. I have attached one of the templates below for reference.

Screenshot 2024-05-13 180820

@VaibhavArora314 can you please assign this to me?

Hamburger automatically close

problem

when i click on any option from Hamburger the hamburger will not be closed automatically.

solution

add functionality when user click on any navbar option the navbar will be closed automatically

Screenshot_20240531-081259.png

Enhancing Footer

The footer is little disturbed and elements are not properly aligned

Improving and Adding new features on POST PAGE

  1. Pagination: Add pagination or infinite scrolling to handle large numbers of posts, improving load times and user navigation.
  2. User Interactions: Increase engagement by allowing users to like, comment, and share posts. Include counters for these interactions to show popularity.
  3. Card Design: Improve the card design with subtle shadows and rounded corners to give a more modern and polished look.
  4. Dark Mode Toggle: Provide a toggle switch to allow users to switch between dark and light modes, catering to different user preferences.
  5. Profile Links: Allow usernames to be clickable, leading to user profiles where visitors can see more posts by the same author

Feat: reCAPTCHA Implementation

Implementing reCAPTCHA v3 on the website will help in enhancing security, preventing spam and unauthorized access, protecting user data.
This also helps in preventing automated bots from accessing or submitting forms on the website.

Screenshot:

Screenshot 2024-05-18 113014

DESIGN CONTACT US PAGE

want to design contact us page and route the page to navbar keeping the responsive UI factor in mind.
Assign me to design it.

Modify Home page UI

It would be great if we enhance the UI of the home page and add hero image, which increase the user experience and engagement

Screenshot 2024-05-30 184925

Add Password Strength Guidelines and "Show Password" Feature to Registration Page

Description
To enhance user security and usability, it is important to provide clear and concise guidelines for creating strong passwords and the ability to toggle password visibility on the registration page. I suggest including the following password requirements and guidelines, along with a "Show Password" feature.

Here's an example of how the password strength indicator and guidelines can be displayed:
331604926-626d221b-7341-4d85-af5d-3769a1762dae (1)

Benefits

  1. Enhances user security by promoting strong password practices.
  2. Reduces the risk of account breaches due to weak passwords.
  3. Provides a clear and user-friendly interface for password creation.

Implementation

  1. Update the registration page to include a password strength meter.
  2. Display the proposed guidelines next to the password input field.
  3. Add a "Show Password" checkbox or icon to toggle password visibility.

Update Website Title

Updating the title of the website from 'vite + react + ts' to 'Styleshare' provides clearer identification and branding for the project.
Having a clear and concise title helps visitors understand the purpose of our website at a glance

Please assign me this issue under gssoc'24

Dynamic searching without page reloading.

image

I have an idea in search section that instead for reloading the whole page we can search the posts in the frontend part only without reloading the page like dynamically fetching the posts in frontend only.

Just need to add couple of lines in th react hook.

I am interested in it because i had done this previously also.

so, I request you to assign it to me.

Add Footer

I want to work on designing the footer for the website with some page links and social media links. I will make sure that the footer is responsive as well.

Screenshot 2024-05-16 092104

@VaibhavArora314 can you please assign this to me?

[Feat]: Auto Commenting when an Issue is Closed

This feature aims to solve the problem of poor communication and lack of acknowledgment when issues are closed. By automatically commenting on closed issues, it ensures that contributors are informed about the closure and are thanked for their efforts. This helps maintain a positive and engaging community atmosphere, encouraging continued contributions and fostering good relationships between maintainers and contributors.

issue closed

Adding a PR Template

Creating a PR Template for easy and organized contributions with proper details.

Enhance Home page of the website

try not to modify the navbar and footer unnecessarily as merge conflicts may arise later.

image

There need to be added following 2 sections:

  1. An about us section
  2. Recent posts sections

Filter option in Posts

A filter option could be added in the posts so that the user can filter based on tags.

Please assign this issue to me under gssoc'24.

[Feat]: Workflow for Closing Old Issues

This feature aims to automate the process of managing old issues, ensuring that the repository remains organized and focused on relevant tasks. By automatically closing old issues, it reduces manual overhead for repository maintainers and helps keep the issue tracker tidy and up-to-date.

Close Old Iss

[Feat]: Workflow for closing Old PRs

This feature aims to automate the management of open PRs in a repository, ensuring that outdated or abandoned PRs are closed in a timely manner. By doing so, it helps maintain repository hygiene, improves workflow efficiency, and provides a better experience for both maintainers and contributors.

Close Old PRs

Adding a Code of Conduct file

To foster a more inclusive and welcoming environment, a Code of Conduct file can be added to the repository to help set clear guidelines for community behaviour.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.