SocialSDK enables the rapid development of social platforms by providing a comprehensive set of components and an API for handling common tasks such as user authentication, profile management, posts creation, and file uploads.
This guide assumes that you have a basic understanding of React and its ecosystem. SocialSDK is designed to work within React applications and utilizes state management, context, and hooks extensively.
To incorporate SocialSDK into your project, clone the repository or copy the desired components directly into your project structure. Ensure that all dependencies, particularly axios
for API requests and jwt-decode
for handling JWT tokens, are installed in your project:
npm install axios jwt-decode
If you're using environment variables (recommended for sensitive information like API keys), ensure they're properly configured in your environment or .env
file.
If you haven't already, download and install Node.js from nodejs.org. npm (Node Package Manager) comes bundled with Node.js.
Open your terminal or command prompt, navigate to your desired location, and create a new directory for your project:
mkdir my-social-app
cd my-social-app
Initialize a new Node.js project by running:
npm init -y
Install the SocialSDK package using npm:
npm install socialsdk
If you haven't already, sign up for an account on the Social platform.
After signing up, navigate to your account settings or developer dashboard to obtain your API key.
For security reasons, it's best practice to store your API key in environment variables. Create a new file named .env
in the root of your project directory and add your API key:
REACT_APP_API_KEY=your_api_key_here
Create a new JavaScript file in your project directory. Let's name it app.js
.
In your app.js
file, import the necessary components from the SocialSDK package:
import {
LogInBox,
ProfileComponent,
FollowComponent,
FeedComponent,
PostCreationForm,
UploadComponent,
RegistrationComponent
} from 'socialsdk';
Define your API base URL and API key:
const API_BASE_URL = 'http://[DOMAIN]/api';
const API_KEY = process.env.REACT_APP_API_KEY;
Implement API requests using the provided functions:
// Example API call to login
export const login = (email, password, platform_id) => makeRequest('/members/login', 'post', {email, password, platform_id});
// Other API request functions...
To test your setup, run your JavaScript file using Node.js:
node app.js
-
API Base URL: All requests are made relative to the
API_BASE_URL
, which should be configured to point to the Social backend server. -
API Key: The module utilizes an
API_KEY
obtained from the environment variables for authorization. Ensure thatREACT_APP_API_KEY
is properly set in your environment.
- makeRequest: A helper function designed to streamline the process of making API calls. It automatically appends the API key to the headers for authorization and handles the construction of the request based on the given endpoint, HTTP method, and data.
This section describes the key functions provided by the api.js module.
- login(email, password, platform_id): Authenticates a user against the platform.
- registerMember(name, email, user_id, password, platform_id): Registers a new member on the platform.
- createPost(platform_id, memberId, contentType, content): Creates a new post on the platform.
-
getPosts(member_id, platform_id): Fetches posts, optionally filtered by
member_id
orplatform_id
. -
uploadFile(file, platform_id): Uploads a file to the platform.
- Note: The front-end implementation for this method is marked as TODO.
- followUser(follower_id, followed_id): Initiates a follow relationship between two users.
- unfollowUser(follower_id, followed_id): Removes a follow relationship between two users.
Platform and Member Management
- createPlatform(name): Creates a new platform within SocialSDK.
- addMemberToPlatform(platform_id, userId): Adds a member to a specified platform.
- getMembersOnPlatform(platform_id): Retrieves all members associated with a specific platform.
- deletePlatform(platform_id): Deletes a specified platform from SocialSDK.
- setPermissions(platform_id, contentType, allowed): Sets permissions for content posting on the platform.
import { login } from './api';
const userEmail = 'user@example.com';
const userPassword = 'password123';
const platformId = 'platform1';
login(userEmail, userPassword, platformId)
.then(response => console.log('Login Successful', response))
.catch(error => console.error('Login Failed', error));
import { registerMember } from './api';
const memberInfo = {
name: 'John Doe',
email: 'john.doe@example.com',
user_id: '1', // This is optional and to be adjusted based on backend requirements
password: 'password123',
platform_id: 'platform1'
};
registerMember(memberInfo.name, memberInfo.email, memberInfo.user_id, memberInfo.password, memberInfo.platform_id)
.then(response => console.log('Registration Successful', response))
.catch(error => console.error('Registration Failed', error));
- Error Handling: All functions are designed to propagate errors to the caller, allowing for sophisticated error handling strategies in the UI layer.
-
Custom Headers: While most requests will only require the API key, additional headers can be added to the
makeRequest
function as needed (e.g., content type for file uploads).
- Expanding the API to cover more backend functionalities as they become available.
- Improving error handling to provide more detailed feedback to the frontend.
- Adding functionality to support real-time features like notifications or live updates.
Key API Method Cheatsheet:
login(email, password, platform_id)
registerMember(name, email, user_id, password, platform_id)
uploadFile(file, platform_id)
createPlatform(name)
addMemberToPlatform(platform_id, userId)
createPost(platform_id, memberId, contentType, content)
followUser(follower_id, followed_id)
unfollowUser(follower_id, followed_id)
getPosts(member_id, platform_id)
getMembersOnPlatform(platform_id)
Handles user login.
<LogInBox platformId="yourPlatformId" />
Displays user profile information, their posts, and followed users.
<ProfileComponent userId="userId" platformId="platformId" />
Allows current users to follow or unfollow other users.
<FollowComponent />
Renders a feed of posts, supports infinite scrolling.
<FeedComponent />
Form for creating new posts with support for text, photos, and videos.
<PostCreationForm />
Handles file uploads to the server.
<UploadComponent platformId="platformId" apiKey="apiKey" />
Enables new users to register on the platform.
<RegistrationComponent platformId="yourPlatformId" />
Manages authentication state and provides login and logout functionalities. Wrap your application's root component with AuthProvider:
import { AuthProvider } from './context/AuthContext';
function App() {
return (
<AuthProvider>
<YourApp />
</AuthProvider>
);
}
Your backend services should be structured to handle requests for user registration, login, post creation, following users, and managing files. Ensure your API endpoints are secured and validate inputs to prevent unauthorized access and data breaches.
More detailed information and usage examples for each API service are available in the project's api.js
file.
- Use environment variables for sensitive information like API keys.
- Secure API endpoints using authentication and validate inputs to prevent SQL injection or other security threats.
- Utilize AuthProvider context to manage user authentication state across your application.
- Issue: Authentication state does not persist on page reload. Solution: Use local storage, session storage, or cookies to store authentication tokens and validate them on the application's mount.
For further support, consider consulting React documentation or reaching out on platforms like Stack Overflow or GitHub discussions.