Skip to content

SocialEnv is a social media platform inspired by Instagram, built with React, TypeScript, and Vite. It allows users to register, log in, create profiles, and share posts with media uploads. Designed with a modern UI using Tailwind CSS, it offers a seamless and responsive user experience.

Notifications You must be signed in to change notification settings

devjayswal/SocialEnv

Repository files navigation


SocialEnv


🧠 Overview

SocialEnv is a full-fledged social media platform inspired by Instagram. Developed using React and Vite, it offers users the ability to register, log in, create and update profiles, and share posts with media This project serves as a significant addition to the developer's portfolio, showcasing proficiency in modern web development practices

you can test via link below

https://social-env.vercel.app/

📁 Project Structure

  • src/ Contains the main source code, including components, pages, and utilities.
  • public/ Holds static assets and the main HTML file.
  • .env.local Environment-specific variable.
  • package.json Lists project dependencies and scripts.
  • vite.config.ts Configuration file for Vit.
  • tailwind.config.js Tailwind CSS configuration.
  • tsconfig.json TypeScript configuratio.

🚀 Features

  • *User Authentication: Secure login and registration functionalities.
  • *Profile Management: Create and update user profiles with personal information and avatars.
  • *Post Creation: Upload and share posts with images and captions.
  • *Responsive Design: Optimised for various device sizes using Tailwind CS.
  • *Modern Development Stack: Built with React, TypeScript, and Vite for efficient development and performance.

🛠️ Technologies Used

  • Frontend:
  • React
  • TypeScript
  • Vite
  • TailwindCSS
  • State Management:
  • ontext API / Redux
  • Routing:
  • React Roter
  • Form Handling:
  • React Hook Form / Formik
  • Backend:
  • Node.js / Express
  • Database:
  • MongoDB / Firebase

🧰 Installation

To set up the project locally, follow these steps:

  1. Clone the Repository:

    git clone https://github.com/devjayswal/SocialEnv.git
  2. Navigate to the Project Directory:

    cd SocialEnv
  3. Install Dependencies:

    npm install
  4. Configure Environment Variables:

  • Create a .env.local file in the root directory and add necessary environment variables.
  1. Run the Development Server:

    npm run dev
  2. Build for Production:

    npm run build

💡 Usage

  • Access the Application

    • Open your browser and navigate to http://localhost:3000 (or the port specified in your configuration).
  • Explore Features

    • Register a new account or log in with existing credentials.
    • Update your profile with personal information and an avatar.
    • Create new posts by uploading images and adding captions.
    • View and interact with posts from other users.

📬 Cotact

For any inquiries or feedback, please contact [email protected].


About

SocialEnv is a social media platform inspired by Instagram, built with React, TypeScript, and Vite. It allows users to register, log in, create profiles, and share posts with media uploads. Designed with a modern UI using Tailwind CSS, it offers a seamless and responsive user experience.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published