CMPLR-Frontend - Tumblr Clone Website Built Using React.Js

Overview

CMPLR

CMPLR

πŸ“ Table of Contents

πŸ“™ About

Responsive Frontend which mocks tumbler ui/ux.

🏁 Get Started

  1. Clone the repository
git clone https://github.com/gaserashraf/CMPLR-Frontend.git
cd CMPLR-Frontend
  1. Running
npm i
npm start

go to your browser and go to http://localhost:5000/

πŸ’» Built Using

  • React.js
  • Docker
  • Jest
  • webpack
  • NPM
  • SASS

πŸ“· Demo Screenshots

logo logo
logo logo
logo
logo
logo logo

9 themes

logo logo

resopnsive

logo logo logo logo

Videos

Player

File Structure

|-- 
    |-- src
    |   |-- App.js
    |   |-- App.testjs
    |   |-- config.json
    |   |-- dockerfile
    |   |-- index.js
    |   |-- reportWebVitals.js
    |   |-- setupTests.js
    |   |-- assets
    |   |-- components
    |   |   |-- ThemeToggle.jsx
    |   |   |-- forgetPasswordComponent
    |   |   |   |-- ForgetPassword.test.js
    |   |   |   |-- View.jsx
    |   |   |   |-- containers
    |   |   |       |-- ForgetPassword.jsx
    |   |   |       |-- ResetPassword.jsx
    |   |   |-- homeComponent
    |   |   |   |-- Controller.js
    |   |   |   |-- Home.test.js
    |   |   |   |-- View.jsx
    |   |   |   |-- containers
    |   |   |       |-- Sec1
    |   |   |       |   |-- Button.jsx
    |   |   |       |   |-- ExploreBtn.svg.jsx
    |   |   |       |   |-- Footer.jsx
    |   |   |       |   |-- GoogleButton.svg.jsx
    |   |   |       |   |-- HomeSec1.jsx
    |   |   |       |-- Sec2
    |   |   |       |   |-- Background.svg.jsx
    |   |   |       |   |-- HomeSec2.jsx
    |   |   |       |-- Sec3
    |   |   |       |   |-- HomeSec3.jsx
    |   |   |       |-- Sec4
    |   |   |       |   |-- HomeSec4.jsx
    |   |   |       |-- Sec5
    |   |   |       |   |-- Audio.svg.jsx
    |   |   |       |   |-- Chat.svg.jsx
    |   |   |       |   |-- HomeSec5.jsx
    |   |   |       |   |-- Link.svg.jsx
    |   |   |       |   |-- Photo.svg.jsx
    |   |   |       |   |-- PostType.jsx
    |   |   |       |   |-- Quote.svg.jsx
    |   |   |       |   |-- Text.svg.jsx
    |   |   |       |   |-- Video.svg.jsx
    |   |   |       |-- SideNav
    |   |   |           |-- CircledNavLink.jsx
    |   |   |           |-- SideNav.jsx
    |   |   |-- loginComponent
    |   |   |   |-- Controller.jsx
    |   |   |   |-- Login.test.js
    |   |   |   |-- Service.jsx
    |   |   |   |-- View.jsx
    |   |   |   |-- containers
    |   |   |       |-- LoginCard.jsx
    |   |   |-- navbarComponent
    |   |   |   |-- Controller.js
    |   |   |   |-- Navbar.test.js
    |   |   |   |-- View.jsx
    |   |   |   |-- containers
    |   |   |       |-- navbarLinks
    |   |   |       |   |-- NavbarLinks.jsx
    |   |   |       |   |-- links
    |   |   |       |   |   |-- AuthLinks.jsx
    |   |   |       |   |   |-- UnAuthLinks.jsx
    |   |   |       |   |-- MessagesPopup
    |   |   |       |   |   |-- MessageItem.jsx
    |   |   |       |   |   |-- Messages.jsx
    |   |   |       |   |   |-- MessagesContainer.jsx
    |   |   |       |   |   |-- MessagesPageMobile.jsx
    |   |   |       |   |   |-- MessagesPopUp.jsx
    |   |   |       |   |   |-- SearchNewMessage.jsx
    |   |   |       |   |-- newPost
    |   |   |       |       |-- NewPostPopup.jsx
    |   |   |       |       |-- NewPostPopupItem.jsx
    |   |   |       |-- searchBar
    |   |   |       |   |-- SearchBar.jsx
    |   |   |       |   |-- searchBarResults
    |   |   |       |       |-- SearchResult.jsx
    |   |   |       |       |-- SearchResultItemBlog.jsx
    |   |   |       |       |-- SearchResultItemContent.jsx
    |   |   |       |-- section1
    |   |   |           |-- NavbarMenuMobile.jsx
    |   |   |           |-- NavbarSection1.jsx
    |   |   |           |-- Section1.jsx
    |   |   |-- partials
    |   |   |   |-- AuthAlert.jsx
    |   |   |   |-- AuthBtn.jsx
    |   |   |   |-- AuthFooter.jsx
    |   |   |   |-- AuthInput.jsx
    |   |   |   |-- MockedComponent.jsx
    |   |   |   |-- OrBar.jsx
    |   |   |   |-- PlaystoreApplestore.jsx
    |   |   |-- registerComponent
    |   |   |   |-- Register.test.js
    |   |   |   |-- View.jsx
    |   |   |   |-- containers
    |   |   |       |-- RegisterCard.jsx
    |   |   |       |-- RegisterStepOne.jsx
    |   |   |       |-- RegisterStepTwo.jsx
    |   |   |-- resetPasswordComponent
    |   |   |   |-- ResetPassword.test.js
    |   |   |   |-- View.jsx
    |   |   |   |-- containers
    |   |   |       |-- ResetPasswordCard.jsx
    |   |   |-- routes
    |   |   |   |-- Routes.jsx
    |   |   |-- shortcuts
    |   |       |-- shortcutController.js
    |   |       |-- shortcuts.test.js
    |   |       |-- View.jsx
    |   |       |-- containers
    |   |           |-- Shortcut.jsx
    |   |           |-- ShortcutGroup.jsx
    |   |           |-- ShortcutsContainer.jsx
    |   |-- contexts
    |   |   |-- themeContext
    |   |   |   |-- ThemeContext.js
    |   |   |-- userContext
    |   |       |-- UserContext.js
    |   |-- styles
    |   |   |-- styles.css
    |   |   |-- styles.css.map
    |   |   |-- scss
    |   |       |-- styles.scss
    |   |       |-- forgetPasswordStyles
    |   |       |   |-- _forgetPasswordStyles.scss
    |   |       |-- homeStyles
    |   |       |   |-- _homeStyles.scss
    |   |       |-- loginStyles
    |   |       |   |-- LoginCard.scss
    |   |       |   |-- LoginView.scss
    |   |       |-- navbarComponent
    |   |       |   |-- _Navbar.scss
    |   |       |-- partials
    |   |       |   |-- authAlert.scss
    |   |       |   |-- AuthBtn.scss
    |   |       |   |-- AuthFooter.scss
    |   |       |   |-- AuthInput.scss
    |   |       |   |-- OrBar.scss
    |   |       |   |-- _authAlert.scss
    |   |       |-- registerStyles
    |   |       |   |-- exploreAnchor.scss
    |   |       |   |-- _exploreAnchor.scss
    |   |       |-- shortcutsStyles
    |   |           |-- shortcuts.scss
    |   |-- __mock_database
    |       |-- db.json

✨ Contributors


Hazem Kasim


Gaser Ashraf


Ahmed Khaled


yahia zakaria


hossam saaed


Hazem abdo

Owner
gaser ashraf
Computer Engineering Student at Cairo University - Competitive Programmer
gaser ashraf
🎡 The frontend of Oud, an online music streaming service that is a high quality clone of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.

Oud Front-End Table of Contents About the Project Build with Getting Started Installation Running Screenshots Videos File Structure Unit Testing Runni

Ahmed Ashraf 40 Aug 16, 2021
Mini ecommerce website using react for frontend and django for backend

Mini ecommerce website using react for frontend and django for backend

Ben Boby 2 Nov 10, 2021
Clone project of a famous Q/A website for developers which is stackoverflow built using MySQL-Express-React-Node :globe_with_meridians:

StackOverflowClone As the name suggests, this project is a clone of a famous Q/A website for professional and enthusiast programmers built solely by m

Mayank Aggarwal 328 Jan 18, 2022
The Bookstore is a website similar to the "Awesome Books" website already built with JavaScript

The Bookstore is a website similar to the "Awesome Books" website already built with JavaScript. It allows you to: Display a list of books. Add a book. Remove a selected book. By building this application, I learned how to use React and Redux.

Hamza Ellaouzi 8 Oct 29, 2021
Framework frontend Javascript yg dibuat untuk belajar lebih memahami tentang sistem reactivity pada framework2 frontend modern.

Fremwok-Fremwokan Framework frontend Javascript yg dibuat untuk belajar lebih memahami tentang sistem reactivity pada framework2 frontend modern. jika

Faizal Amiruddin 3 Jan 2, 2022
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

Sijeesh Miziha 14 Jan 12, 2022
React-hulu-clone - Hulu Clone Built Using React.js

This is a Next.js project bootstrapped with create-next-app. Getting Started Fir

Tadeo Deluca 1 Jan 21, 2022
Disney+ clone WebSite Built With React And Firebase

Disney+ clone Deployment Firebase Links: https://disneyplus-clone-pro.firebaseap

null 1 Dec 29, 2021
Youtube Clone Frontend (React + Redux)

Youtube Clone Frontend Youtube clone using PERN stack (Postgres, Express, React, Node). This is the frontend repository, built with React + Redux. If

Manikandan 1.3k Jan 14, 2022
Opensea-clone - Opensea Clone Built With React.js

Opensea Clone This Project is a fork of Ethereum Boilerplate and demostrates how

Paschal 5 Jan 18, 2022
netflix clone using react js, css, axios, themoviedb, get api, netflix-clone react simplified project, axios-react

Netflix Clone React js This project is a simplified front end clone of Netflix. It was created with React.js and CSS,It uses the famous Javascript lib

Sijeesh Miziha 8 Dec 1, 2021
Facebook Clone - A simple, responsive Facebook Clone made using Typescript and React.

Facebook Clone A simple, responsive Facebook Clone made using Typescript and React. I chose vitejs as a build tool for this project (Thanks @karanprat

Ayushi Gupta 74 Jan 12, 2022
Discord-clone - Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Express, MongoDB and Redis

Discord Clone using React, ReactQuery, Tailwindcss, Redux, Socket IO, NodeJS, Ex

Milad Ranjbar 148 Jan 19, 2022
A Netflix clone created using React. It is built using modern react tools/best practices, such as hooks, context API, and redux toolkit.

Netflix-Clone A Netflix clone I created for the sake of practicing React and Redux. It features design patterns recommended by the documentation. Some

Subhanga Upadhyay 83 Jan 9, 2022
"Math magicians" is a website for all fans of mathematics built using React and Bootstrap.

Math Magicians "Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations

Dico Diaz Dussan 6 Dec 6, 2021
Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Davide Mandelli 4.2k Jan 16, 2022
A Disney+ Clone that you can sign in with your Google AccountA Disney+ Clone that you can sign in with your Google Account

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Yusuf İşbilir 9 Dec 29, 2021
Learn to build Udemy Web Clone with ReactJS. ... This is a front to back `Udemy Web Clone` course for absolutely everybody.

Udemy Clone React Learn to build Udemy Web Clone with ReactJS. ... This is a front to back Udemy Web Clone course for absolutely everybody. What is th

Pradeep Singh Rawat 1 Dec 24, 2021
Disney-Plus-Clone - Disney Plus Clone created with reactjs

Disney Plus Clone Readme LIVE DEMO Description ReactJS Disney Plus Clone created

TRISH 2 Jan 8, 2022