🤵 Social networking website mimic of tumblr

gaser ashraf

Last update: Feb 11, 2022

Related tags

Learning resource CMPLR-Frontend

Overview

CMPLR

📝 Table of Contents

About
Get started
Technology
Screenshots
File structure

📙 About

Responsive Frontend which mocks tumbler ui/ux.

🏁 Get Started

Clone the repository

git clone https://github.com/gaserashraf/CMPLR-Frontend.git

cd CMPLR-Frontend

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

9 themes

resopnsive

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}

A collection of social media strategies for remix-auth

Remix Auth Socials A collection of Remix Auth strategies for Oauth2 Social logins. 👷 If you are interested in creating one of the planned strategies,

Jan 5, 2023

Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Twitter.

news.ycombinator1.com Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Dis

Sep 18, 2022

Second-challinge - Frontend Mentor - Social proof section

Frontend Mentor - Social proof section Welcome! 👋 Thanks for checking out this

Feb 8, 2022

A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

Aug 26, 2022

Base Rails app that includes login, social login, homepage, and basic model for serving as a scaffold app.

Rails7Base I created the Rails7Base as a scaffold application. Countless times, I had to create apps that must have the following features: Login syst

Jul 2, 2022

A set of connectors to describe, parse and process the data sources provided by websites and social networks

HUDI-PACKAGE-CONNECTORS What is this repository for? A set of connectors to describe, parse and process the data sources provided by websites and soci

Aug 5, 2022

A social network to connect web3 users and their communities.

Introduction This project is built using react, tailwindcss and Moralis (documentation) for our backend. We are also heavily using the built-in Morali

Jan 5, 2023

Chrome extension for replacing addictive and annoying features of various social media sites with inspirational quotes.

Saner Social Media Chrome extension for replacing addictive and annoying features of various social media sites with inspirational quotes. Saner Socia

Oct 4, 2022

Social media platform that hosts community-driven challenges where everyone can play and compete

Komo A social media platform that hosts community-driven challenges where everyone can play and compete. How To Install Komo TBA Preview Home Screen A

Jun 13, 2022

🤵 Social networking website mimic of tumblr

Related tags

Overview

CMPLR

📝 Table of Contents

📙 About

🏁 Get Started

💻 Built Using

📷 Demo Screenshots

9 themes

resopnsive

Videos

File Structure

✨ Contributors

You might also like...

A collection of social media strategies for remix-auth

Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Twitter.

Second-challinge - Frontend Mentor - Social proof section

A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

Base Rails app that includes login, social login, homepage, and basic model for serving as a scaffold app.

A set of connectors to describe, parse and process the data sources provided by websites and social networks

A social network to connect web3 users and their communities.

Chrome extension for replacing addictive and annoying features of various social media sites with inspirational quotes.

Social media platform that hosts community-driven challenges where everyone can play and compete

Owner

gaser ashraf

Inter Process Communication Module for node supporting Unix sockets, TCP, TLS, and UDP. Giving lightning speed on Linux, Mac, and Windows. Neural Networking in Node.JS

A social media platform aimed to capture the essence of all popular, existing social media platforms

Social-Media-Dashboard - RESPONSIVE Dashboard for social media created with JS, HTML and CSS and with the ability to switch between DARK THEME and LIGHT THEME

Hackathon for Social Good 2022 and use your superpowers to create a solution for the social good.

Qwerty is the first social website focused on connecting students with similar classes and gender identities

Decentralized Social Network Money Frauds/Scams including BitClout, Twetch, Steemit, PeakD

The Web 3.0 social layer built on top of Twitter

Hasbik is a community based social token and the new paradigm in the crypto space. With the goal to build a community around a crypto token.

Sharerbox - Free, minimalist and lightweight JavaScript-based social-media sharer for websites

Rede social baseada no ShareMe para compartilhamento e download de fotos em React,Sanity.io e TailWindCSS