Introduction
Building a social media platform like Picture Pulse can be a challenging and exciting project for a programmer. This application has a wide range of features that allow users to sign up, log in, and interact with the platform in a secure and user-friendly way. The application includes features such as authentication and authorization, the ability to upload photos, and the ability to update user information such as name, username, bio, email, and profile picture. Additionally, this application has a light/dark mode feature and great lighthouse performance, making it a fast and enjoyable experience for users.
In this article, I will be going into detail about the development process and the technologies used to build this application. I hope you find this article informative.
First, let's talk about the features..... ✨
Features and Functionality
Sign up and Log in
Photo uploads
Update user Profile information
Light/Dark mode
Google Lighthouse
1. Sign up and Log in
First, let's talk about user sign-up and log-in. These are essential features that allow users to create an account on your platform and later sign in to access their profile To implement these features, you'll need to develop a backend for the necessary logic to handle user registration and authentication. This can be done using python and Django and database Postgres etc.
Once users have signed up and logged in, you'll need to implement authentication and authorization controls to ensure that only the correct users have access to certain features and data. This can be done by implementing token-based authentication. In this project, I implemented JWT (JSON Web Token) by generating a token on the server side after successful user login. This token was then passed to the client side and stored in the browser's local storage. For every subsequent request to the server, the client would attach the token to the headers, allowing the server to identify the user and grant them access to protected routes and resources.
Navigate to https://picturepulse.netlify.app/
Fill in the "Username and Password" field / You can create a new account in addition to the one provided.
Click the "Log in" button
You will be authorized for your account
2. Photo uploads
Next, let's talk about photo uploads. This is a key feature of a social media platform like Picture Pulse, and it requires several components to be implemented correctly. Firstly, you'll need to provide a way for users to select and upload photos from their devices, which can be achieved using a file input element and JavaScript. Once the photo is uploaded, you will need to store the photo and reference it in your database. You may also want to consider adding a feature to enable users to confirm their photos before uploading.
Click "View Profile"
Click on the "Upload Image" icon
After selecting an Image Click on the "Upload" button
The image is uploaded successfully
3. Update user Profile information
Next, you'll need to implement a way for users to update their profile information, such as their name, username, bio, email, and profile picture. This can be done by providing an "edit profile" page, where users can make changes to their information, and then update the relevant fields in the database.
Click "Edit Profile"
Make some changes and click "Submit".
4. Light / Dark mode
I added a light/dark mode feature to the platform, which allows users to switch between a light and dark version of the site based on their preference.
The Light/Dark mode feature is a popular and useful feature that allows users to switch between a light and dark color scheme on a website or application. This feature is particularly useful for users who prefer to use a darker color scheme at night or in low-light environments, as it can help to reduce eye strain and improve the readability of text.
5. Google Lighthouse
Google Lighthouse is an open-source, automated tool for measuring the quality of web pages
Here is my Lighthouse report
Overall, building a social media platform like Picture Pulse requires a combination of programming skills and knowledge of various technologies. It can be a complex and time-consuming project, but the end result is a fully functional platform that users can interact with and enjoy.
It's a lot of work for one person to build this completely, a better way would be to divide the work among a team and use an agile development methodology.
Process of Developing
Developing a social media platform like Picture Pulse using the tech stack of React, Django, Django REST framework, Postgres, SCSS, React Router, React Query, JWT, Postman and railway for deployment is a multi-step process. Here's an overview of the development process:
Setting up the development environment: The first step is to set up the development environment by installing the necessary tools and dependencies, such as Node.js, Python, and Postgres. You'll also need to set up VS Code and Postman, which will be used for writing code and testing the API respectively.
Creating the Django Backend: The next step is to create the backend of the application using Django, a high-level Python web framework. You'll start by creating a new Django project and then proceed to create the necessary models to represent the data of the application, such as Users, Photos, and Profile pictures. You'll also need to set up the Postgres database and create the necessary tables and relationships.
Creating the Django REST API: After the models are created, you'll use the Django Rest Framework to build the RESTful API. This includes creating views, serializers, and routers to handle different routes and methods for the API, such as GET, POST, and PUT.
Implementing JWT for authentication and authorization: Use JWT to handle user authentication and authorization. This includes generating a token on the server side after a successful login and checking the token on the client side for every subsequent request.
Creating the React Frontend: After the backend is set up, you'll proceed to create the front end of the application using React. You'll use create-react-app to set up the basic structure of the application and then proceed to build the various components, such as the login page, Signup page, Home page, Edit Page and Profile page. You'll also use React Router for client-side routing, and React Query for managing the data from the API.
Styling the Application: After the front end is set up, you'll proceed to style the application using SCSS. You'll use a pre-processor to write the styles and create a consistent look and Responsive design throughout the application.
Testing the Application: After the application is complete, you'll proceed to test it using Postman. You'll test the API endpoints and ensure that they are working as expected. You'll also test the front end by manually navigating through the application and checking that everything is working correctly.
Deployment: After the application is tested, Use railway to deploy the application to a live server. This includes configuring the server host the Django backend and the React front end. You'll also need to set up the database and other necessary configurations.
Continuous Integration and Deployment: Once your application is deployed you can use CI/CD pipeline to ensure that your application is always running the latest version of the code, this will help you to catch errors early and fix them.
Throughout the development process, it's important to keep in mind the design principles of the application, such as user interface and user experience, security and performance. Additionally, using an Agile development methodology can help to manage the scope, timelines and quality of the project.
This process is just a general guideline, the specific steps and tools may vary depending on the complexity and scope of the project and the developer’s familiarity with the technologies used.
Challenges
Implementing a secure authentication and authorization system that can handle large numbers of users and protect against potential security threats
Managing the storage and retrieval of large numbers of photos and other data efficiently
Creating a responsive and visually appealing user interface that is consistent across different devices and browsers
Ensuring that the platform is scalable and can handle an increasing number of users and requests
Keeping up with the latest technologies, best practices, and security standards to ensure that the platform remains current and competitive.
Summary
In summary, building a social media platform like Picture Pulse is a complex project that requires a combination of programming skills and knowledge of various technologies. The key features of the platform include user sign-up and log-in, authentication and authorization, photo uploads, and updating user information. To achieve these goals, I have proposed a tech stack that includes React, Django, Django Rest Framework, Postgres, SCSS, React Router, React Query, JWT, VS Code, Postman, and railway for deployment.
Some of the main challenges that I faced when building a social media platform like Picture Pulse include implementing a secure authentication and authorization system, managing the storage and retrieval of large amounts of data, creating a responsive and visually appealing user interface, and ensuring scalability and robustness of the platform.
In terms of learning, building a social media platform like Picture Pulse can provide an opportunity to learn and implement a wide range of technologies and best practices. Developers can learn how to build a RESTful API using Django and Django Rest Framework, how to build a responsive and dynamic user interface using React and SCSS, how to implement JWT for authentication and authorization, and how to deploy and maintain a live application using and CI/CD pipeline.