https://github.com/tumblrx/frontend

TumblrX is a full mimic for Tumblr with all its functionalities It is a full-stack application that allows you to create a blog, post, and comment on your blog.
https://github.com/tumblrx/frontend

cufe-2023 front-end-development javascript jest react react-router react-router-dom sass-framework social- social-media software-engineering tumblr tumblrx

Last synced: about 1 month ago
JSON representation

TumblrX is a full mimic for Tumblr with all its functionalities It is a full-stack application that allows you to create a blog, post, and comment on your blog.

• Host: GitHub
• URL: https://github.com/tumblrx/frontend
• Owner: TumblrX
• Created: 2021-11-09T23:06:53.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-08-23T21:13:32.000Z (about 2 years ago)
• Last Synced: 2024-10-15T16:21:34.961Z (about 1 month ago)
• Topics: cufe-2023, front-end-development, javascript, jest, react, react-router, react-router-dom, sass-framework, social-, social-media, software-engineering, tumblr, tumblrx
• Language: JavaScript
• Homepage: https://tumblrx-app.herokuapp.com/
• Size: 17.7 MB
• Stars: 5
• Watchers: 1
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TumblrX ![cover](./public/favicon.ico)

## 📝 Table of Contents

- [About](#about)

- [features](#features)

- [Technologies used](#build)

- [getting started](#start)

- [Demo](#demo)

- [screenshots](#screenshots)

- [Contributers](#contributers)

### 🚩About

**TumblrX** is a full mimic for Tumblr with all its functionalities

It is a full-stack application that allows you to create a blog, post, and comment on your blog.

it is a social media app to:

- express yourself, discover yourself, and bond over the stuff you love.💖

- It's where your interests connect you with your people🤝.

- The service allows users to post multimedia and other content to a short-form blog. Users can follow other users' blogs.

### ✨ Features 

- create a blog and post to it.

- **add posts** (including photos, videos, and text)

- **react** to posts && comments

- **add comments**

- **reblog posts**

- **follow** other users' blogs to see their posts

- show **dashboard** with all your posts and comments

- **explore section** to show all trending posts and blogs

- **search section** to search for posts and blogs

- blog section where you can show your blog & customize it

- **real time chat** with other users

- **real time notifications** show you all updates on your blog

- manage your blog && account settings and edit them

## 💻Technologies Used

- React

- React-Router dom

- Redux Toolkit

- sass modules

- Axios

- Socket io

- pusher-js

- Docker

- Jest

- Webpack

## 🏁Getting Started 

1. **_Clone the repository_**

```bash

 git clone https://github.com/TumblrX/Frontend.git

```

2. **_Go to the directory of the repository_**

```bash

 $ cd Frontend

```

3. **_install Dependencies_**

```bash

npm install

```

4. **_Run the Website and Enjoy your time 🔥_**

```bash

npm run

```

## 🎥 Demo



https://user-images.githubusercontent.com/60351557/186261764-8945dbad-7159-44d2-acb4-09598dfe535c.mp4



## 🎥 screenshots

- Home Page

  ![Home page](./screenshots/01.png)

  


- Sign Up

  ![Sign up](./screenshots/02.png)

  


- Dashboard

  ![DashBoard](./screenshots/03.png)

    


- Explore Section

  ![Explore Section](./screenshots/05.png)

    


- Add Post

  ![Add post](./screenshots/005.png)

    


- Comments

  ![Comments](./screenshots/06.png)

    


- Chat

  ![Chat](./screenshots/chat.jpeg)

    


- Blog View

  ![Blog View](./screenshots/08.png)

    


- Edit Blog View

  ![Edit Blog View](./screenshots/07.png)

    


- Settings

  ![Settings](./screenshots/09.png)

  ![Settings](./screenshots/10.png)

  

  


- Responsive

  - Sign up

  

    ![Sign up](./screenshots/11.png)

      


  - DashBoard

  

    ![Home page](./screenshots/12.png)

    ![Explore](./screenshots/13.png)

    ![Dashboard](./screenshots/14.png)

      


      

  - Blog

  

    ![Blog](./screenshots/16.png)


      


  - Edit Appearance

  

    ![Edit Appearance](./screenshots/15.png)

## ✨ contributers

 


[![](https://github.com/omar214.png?size=150)](https://github.com/omar214)

[![](https://github.com/Taher-Mohamed-Ahmed-Saad.png?size=150)](https://github.com/Taher-Mohamed-Ahmed-Saad)

[![](https://github.com/YousefElshabrawy.png?size=150)](https://github.com/YousefElshabrawy)

[![](https://github.com/Ahmedmma72.png?size=150)](https://github.com/Ahmedmma72)

[![](https://github.com/AhmedNossir.png?size=150)](https://github.com/AhmedNossir)