SocioMax is a social media platform designed to connect people and foster interactions. Users can sign up, log in, create profiles, and share posts with their network.
- User Authentication: Sign-up and sign-in functionalities.
- Profile Management: Users can create and update their profiles.
- Post Creation: Users can create, view, and manage their posts.
- Infinite Scroll: Efficiently load more posts as the user scrolls.
-
Clone the repository:
sh
Copy code
git clone https://github.com/yourusername/sociomax.git cd sociomax
-
Install dependencies:
sh
Copy code
npm install
-
Set up environment variables:
Create a
.env
file in the root directory and add the following variables:sh
Copy code
REACT_APP_API_ENDPOINT=your_api_endpoint REACT_APP_APPWRITE_PROJECT_ID=your_appwrite_project_id
-
Run the app:
sh
Copy code
npm start
To sign up, navigate to the sign-up page and fill in the required details. Once registered, you will be redirected to the sign-in page.
To sign in, navigate to the sign-in page, enter your email and password, and submit the form. Upon successful authentication, you will be redirected to the homepage.
After signing in, you can create new posts by clicking on the "New Post" button and filling in the necessary details.
SocioMax uses React Context and Hooks to manage authentication states. Below is a brief explanation of how it works:
- AuthProvider.tsx: This file defines the
AuthProvider
component, which wraps around the application to provide authentication context. - useUserContext.ts: Custom hook to access the authentication context.
- SignInForm.tsx: Component for handling user sign-in.
- SignUpForm.tsx: Component for handling user sign-up.
tsx
Copy code
import { getCurrentUser } from '@/lib/appwrite/api'; import { IContextType, IUser } from '@/types'; import { createContext, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; // ... (code omitted for brevity)
tsx
Copy code
import { SigninValidation } from "@/lib/validation"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; // ... (code omitted for brevity)
- React: A JavaScript library for building user interfaces.
- React Router: Declarative routing for React.
- React Hook Form: Performant, flexible, and extensible forms with easy-to-use validation.
- Zod: A TypeScript-first schema declaration and validation library.
- Appwrite: Open-source backend as a service.
Contributions are welcome! Please fork the repository and create a pull request with your changes.
- Fork the repository.
- Create a feature branch.
- Commit your changes.
- Push your changes to your feature branch.
- Create a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.