/FeatherPerfect_fe

FeatherPerfect is a social media application developed using ReactJS, aimed at creating a dedicated space for wildlife enthusiasts and photographers. Users can upload and share their wildlife photos, follow other users, and explore a curated feed of nature-based content.

Primary LanguageJavaScript

πŸ“Έ FeatherPerfect - Social Media for Wildlife Enthusiasts πŸ¦…

FeatherPerfect Screenshot


🌟 Table of Contents


🌟 Overview 🌟

FeatherPerfect is a social media platform built using ReactJS, offering wildlife photographers and nature enthusiasts a dedicated space to showcase their work. The application allows users to share their wildlife photos, follow other users, and enjoy a curated feed full of beautiful nature-based content.

Whether you're a professional wildlife photographer or a casual nature lover, FeatherPerfect is the place to connect, share, and get inspired by the beauty of nature. Interface


✨ Key Features ✨

  • πŸ“· Photo Sharing

    • Upload and share your wildlife photography with a dedicated community of nature enthusiasts.
  • 🌍 Curated Feed

    • Explore a curated feed of breathtaking wildlife images, bringing nature to your screen.
  • πŸ”” Follow Users

    • Follow fellow wildlife photographers, engage with their posts, and build a nature-loving network.
  • πŸ“± Responsive Design

    • Optimized for viewing on all devices, ensuring smooth navigation whether you're on mobile, tablet, or desktop.

βš™οΈ Technologies Used βš™οΈ

  1. 🟦 ReactJS

    • The core framework used for building a dynamic and interactive front-end.
  2. 🟩 Node.js

    • Powers the back-end server, ensuring efficient and scalable handling of user data and content.
  3. 🎨 Tailwind CSS

    • Ensures a clean, responsive, and aesthetically pleasing design.

πŸš€ Getting Started with Create React App

This project was bootstrapped with Create React App, a popular toolchain for building scalable React applications with zero configuration. Below are the steps and scripts you'll need to get started.


Prerequisites

Before running the project, ensure you have the following installed on your machine:

  • Node.js (version 14.x or later) - Download Node.js
  • npm (comes bundled with Node.js) or Yarn as the package manager.

Installation

Clone the repository and install the necessary dependencies:

git clone https://github.com/SwanandD121/FeatherPerfect_fe.git
cd FeatherPerfect_fe
npm install

Available Scripts In the project directory, you can run several predefined scripts to manage the development and production environment.

1. npm start Starts the development server:

Runs the app in development mode. Open http://localhost:3000 in your browser to view the application. Hot-reloading: The page automatically reloads when you make changes to the code. Displays lint errors in the console for easier debugging. To run:

npm start

2. npm test Launches the test runner in interactive watch mode:

Allows you to run unit tests, ensuring your components and functions behave as expected. Based on Jest testing framework, with built-in support for running assertions, snapshots, and mocks. For more details, see running tests. To run:

npm test

3. npm run build Creates an optimized production build of the app:

Bundles the React app into static files for deployment in the build folder. Optimizes the React code for best performance by minifying the JavaScript files. Generates hashed filenames for caching purposes, ensuring faster load times for users. Your app will be ready for deployment after running this command. For more information, see the deployment guide.

To build the app:

npm run build

4. npm run eject Warning: Ejecting is a one-way operation and cannot be undone.

The eject command is meant for developers who need full control over the project's configuration:

Removes the single build dependency from your project. Copies all Webpack, Babel, ESLint, and other configuration files into your project for direct editing. Use this option if the default setup provided by Create React App doesn't meet your needs, but note that it introduces more complexity. To eject:

npm run eject

Note: You don’t need to eject if you’re satisfied with the existing setup. Most applications are perfectly served by the built-in configuration provided by Create React App.


πŸš€ How to Contribute to This Project

We’d love to have you contribute to FeatherPerfect! Follow these steps to get started:

  1. 🍴 Fork the Repository

    • Go to the repository page.
    • Click the Fork button to create a copy of the repository in your GitHub account.
  2. πŸ’» Clone Your Fork

    • Clone the forked repository to your local machine:
      git clone https://github.com/your-username/FeatherPerfect_fe.git
    • Replace your-username with your GitHub username.
  3. 🌿 Create a New Branch

    • Create a new branch for your feature or bug fix:
      git checkout -b feature-branch-name
  4. πŸ› οΈ Make Your Changes

    • Use your favorite code editor to make changes or add new features.
    • Contact the project manager Swanand Deshpande for any queries.
  5. βœ… Test Your Changes

    • Run the project locally and ensure everything works as expected.
  6. πŸ’¬ Commit Your Changes

    • Commit your changes with a descriptive message:
      git add .
      git commit -m "Added feature X or Fixed issue Y"
  7. πŸ“€ Push Your Changes

    • Push the changes to your forked repository:
      git push origin feature-branch-name
  8. πŸ”„ Create a Pull Request (PR)

    • Go back to the original repository here.
    • Click the Compare & pull request button, write a short description of your changes, and submit the
  9. πŸ”Ž Review Process

    • The maintainers will review your PR and merge it if everything looks good.

πŸ† Contribution Points

Contributors can earn points based on the complexity of their tasks:

  • πŸ₯‡ Level 1: 10 Points
  • πŸ₯ˆ Level 2: 25 Points
  • πŸ₯‰ Level 3: 45 Points

GSSoC Guidelines

As this project is part of GSSoC, please follow the GSSoC Guidelines to ensure smooth participation.


πŸ“„ Ending Note

Thank you for your interest in FeatherPerfect! We value your contributions and are excited to have you as part of our community. Feel free to share your ideas, report bugs, and help us make FeatherPerfect even better.


πŸ™ŒπŸ» Join Us!

Join the wildlife photography community on FeatherPerfect and contribute to an ever-growing platform for nature lovers!

Happy coding and exploring the wild! πŸŒΏπŸ“Έ