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
https://social-env.vercel.app/
- 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.
- *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.
- 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
To set up the project locally, follow these steps:
-
Clone the Repository:
git clone https://github.com/devjayswal/SocialEnv.git
-
Navigate to the Project Directory:
cd SocialEnv
-
Install Dependencies:
npm install
-
Configure Environment Variables:
- Create a
.env.local
file in the root directory and add necessary environment variables.
-
Run the Development Server:
npm run dev
-
Build for Production:
npm run build
-
Access the Application
- Open your browser and navigate to
http://localhost:3000
(or the port specified in your configuration).
- Open your browser and navigate to
-
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.
For any inquiries or feedback, please contact [email protected].