Skip to content

mmnsrti/pic4all

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Pic4All

Logo

Pic4All is a web application for sharing and discovering images built using React, React Router, Tailwind CSS, and Sanity CMS. This README provides an overview of the project, its features, and instructions for getting started.

Table of Contents

Features

  • Artistic Exploration: Explore a dedicated section for art-related content.
  • Create Your Content: Share your own images and stories effortlessly.
  • Discover New Content: Find inspiration and discover a curated feed of images and posts.
  • Mobile-Friendly: Enjoy a responsive design optimized for mobile devices.
  • Detailed Post View: Dive deep into individual posts with the post detail page.
  • User Profiles: Manage your profile and uploaded content easily.
  • Search Functionality: Seamlessly search for posts and users.
  • User Authentication: Register and sign in to access additional features.

Screenshots

Here are some screenshots of the Pic4All application:

Main Page

Main Page

The Main Page is the heart of Pic4All's content discovery. It offers a curated feed of captivating images and stories. When you're logged in as a post creator, a "Delete" button appears when you hover over your posts, providing effortless post management.

Main Page 2

Main Page 2

Main Page 2 is another glimpse into Pic4All's content diversity and thoughtful design. As a post creator, you'll notice the dynamic "Delete" button feature when hovering over your posts, ensuring convenient post management without cluttering the interface.

Sign-In Page

Sign-In

The Sign-In Page enables users to register and log in to their Pic4All accounts, unlocking additional features and personalized experiences. Users can also conveniently log in using their Google accounts, streamlining the sign-in process for a seamless experience.

Category Page

Category This is the Category page, where users can explore a dedicated section for art-related content.

Create Page

Create Page2

The Create Page allows users to effortlessly share their own images, stories, and various types of content with the vibrant Pic4All community. When creating a new post, users can:

  • Share a link, picture, or GIF.
  • Select a category that best fits their content.
  • Add a title to describe their post.
  • Include a detailed description to provide context and engage viewers.

This comprehensive feature set empowers users to share their creativity and stories in a rich and personalized way, enhancing the diversity and depth of content within Pic4All. Create Page The Create Page lets users easily share images and stories with the Pic4All community.

Mobile View 2

Pic4All is optimized for mobile devices, ensuring a smooth and enjoyable user experience on smaller screens.

Mobile View

Another example of the mobile view, demonstrating the responsiveness of the application.

Post Detail Page

Post Detail Page

The Post Detail Page allows users to dive deep into the details of individual posts, providing an up-close view of the content. Here, you can not only view posts in detail but also interact with them by saving and leaving comments.

This interactive feature enriches the user experience, allowing users to engage with and personalize their interaction with the content they discover on Pic4All.

Profile Page

Profile Page

The Profile Page is your personal hub on Pic4All, where you can manage your profile, view your creations, and access saved content. Customize your Pic4All experience by easily tracking what you've created and saved. Additionally, you can log out directly from this page, providing convenient account management.

Search

The Search feature allows users to find specific posts and users quickly, enhancing content discoverability.

Getting Started

To get started with Pic4All, follow these steps:

  1. Clone the repository:

    git clone https://github.com/mmnsrti/pic4all.git
    1. Install dependencies in front end and Start the development server :
    npm install
    npm start
    1. Access the application in your web browser at http://localhost:3000.

Contributing

We welcome contributions to Pic4All! Feel free to open issues, submit pull requests, or provide feedback to help improve the project.

Acknowledgments

We extend our heartfelt gratitude to the open-source community and the developers behind the libraries and tools that made this project possible.

Author

- Mmnsrti@gmail.com