https://github.com/seyed0123/oxdgram

A social media using react and django
https://github.com/seyed0123/oxdgram

axios csrf-protection django django-rest-framework jwt-token react react-bootstrap react-router-dom sass scss social-media

Last synced: 3 months ago
JSON representation

A social media using react and django

• Host: GitHub
• URL: https://github.com/seyed0123/oxdgram
• Owner: seyed0123
• License: mit
• Created: 2023-08-14T11:31:17.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-09T17:47:51.000Z (almost 2 years ago)
• Last Synced: 2025-01-24T08:31:58.086Z (5 months ago)
• Topics: axios, csrf-protection, django, django-rest-framework, jwt-token, react, react-bootstrap, react-router-dom, sass, scss, social-media
• Language: TypeScript
• Homepage:
• Size: 100 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




# OXDgram





# Social Media Website

Welcome to our Social Media Website, a dynamic social networking platform developed using Django and React. This application allows users to interact with each other in a variety of ways, similar to popular social media platforms.

## Project Introduction

The Social Media Website is designed with a focus on user interaction. It offers features such as creating an account, posting messages, following other users, and viewing posts from followed users. The application is built using Django, a high-level Python web framework that enables rapid development of secure and maintainable websites, and React, a powerful JavaScript library for building user interfaces.

The backend of the application is handled by Django, which takes care of user authentication, data management, and server-side logic. Django's "batteries included" philosophy provides almost everything developers might want to do "out of the box", making it a robust choice for the backend of our application.

The front end of the application is built using React. With its component-based architecture, React allows us to create a highly interactive and responsive user interface. By handling the view layer of our application, React ensures a seamless user experience.

wait for the demo to loading



## Key Features

- User Registration and Authentication: Users can create a new account and log in to the application. Django's built-in authentication system is used to handle user registration and authentication.

- Posting Messages: Users can post messages which will be visible to all their followers.

- Following Users: Users can follow other users. Once a user follows another user, they will be able to see their posts.

- Viewing Posts: The posts are displayed in a feed format.

- Viewing Users: Users can see user profiles.

This project is a great opportunity to learn and understand how a full-fledged social media website works, and how React and Django can be used together to build powerful web applications









## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

## Prerequisites

List what software and versions are needed to run your project and how to install them.

- Python 3.8

- Django 3.2.5

- Node.js 14.17.0

- React 17.0.2

## Installation

Provide a step-by-step guide on how to get a development environment running. This will likely include cloning the repository, installing dependencies, and setting up a database.

1. Clone this repository to your local machine using `git clone https://github.com/seyed0123/OXDgram.git`.

2. Navigate to the project directory with `cd OXDgram`.

3. Install the JavaScript dependencies with `npm install`.

4. Migrate the database using `python manage.py migrate`.

## Running the Application

Explain how to start your application. For a Django and React application, this might involve running the Django server and the React development server.

1. Start the Django server with `python manage.py runserver`.

2. In a new terminal window, navigate to the frontend directory with `cd frontend`.

3. Start the React development server with `npm start`.

## Running Tests

Run the tests using `python manage.py test`.

Built With

List the major frameworks and libraries that you used to build your application.

- [Django](https://www.djangoproject.com/) - The web framework used for the backend

- [React](https://reactjs.org/) - The library used for the frontend

## diagrams

### database

![](shots/database.png)

### views

![](shots/person.views.png)

![](shots/post.views.png)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file

## screenshots

### server

![](shots/server.png)

### login

![](shots/login1.png)

![](shots/login2.png)

### create account

![](shots/create1.png)

![](shots/create2.png)

### setting

![](shots/setting1.png)

![](shots/setting2.png)

![](shots/setting3.png)

![](shots/setting4.png)

### profile

![](shots/profile1.png)

![](shots/profile2.png)

### home

![](shots/home12.png)

![](shots/home2.png)