Seenit: Reddit Clone Built with ReactJS And MongoDB

Overview

Seenit (Reddit Clone - Attempt!)

Tech Stack: HTML/CSS/Javascript, React, Express, Mongodb, Node.

Hello! This will be one of my 'many' attempts at a full-stack MERN (MongoDB, ExpressJS, ReactJS, NodeJS) web application! After around ~ 1 week of spending full-time hours, I am quite happy with how this has come about so far. There are still so many features to be added but below are some snapshots & descriptions of what has been completeed thus far.

alt text

alt text

alt text

alt text

alt text

Motivation:

I am actually an avid user of Reddit, and probably spend more time on there than I do on most social media. I actually enjoy reading about various topics of interest and I love the features of the app with upvotes and downvotes. I believe its a fun way to spend my freetime!

Frontend:

  • I did this from absolute bare-bones scratch, although in some cases I thought to myself "I should've used bootstrap" I thought it was very well worth putting in the time & effort working on the HTML/CSS of this project.
  • Visualize first, then build. Thanks to tools such as Figma, prototyping was made very easy. Afterwards, I would just 'type code' that made the webpage look like what I had drafted in the prototype.
  • Use of a lot of Font Awesome React Icons library, and I definitely plan on continueing to use this for future projects, they just have so many great selections.
  • In terms of ReactJS, there were a lot of components that needed to be separated out, thankfully I am very used to this "Component Structure" design by now, and I am it's absolutely one of my favorite parts of using React - it just makes building web. page components so much easier (and cleaner) than vanilla Javascript.

Backend:

  • This was definitely a tougher part, I first wanted to figure out how to use PassportJS library to authorize and authenticate Users. It is absolutely an essential part of getting the App started as it also relates to the data that needs to be stored in the database.
  • The key data that needed to be stored was Subreddits, (which consist of) Posts, (which 'can' consist of) Comments, which are made by Users, etc. As you can see there will be a need to reference a lot of these datas to eachother.
  • Schema designing was a fun & great experience as mongodb uses JSON-like documents which makes it very familiar to see as a Javascript Developer. One of my favorite things was thinking about a 'nested comments structure'; how one comment can have children of comment replies, and so on.

Feel free to download and play around!

(A demo will be launched soon), for now if you can install node and its dependencies, you can run npm start to check it out :) Any feedback is always appreciated.

Owner
Shelby Sakamoto
I love problem solving =)
Shelby Sakamoto
Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

?? Shopping App ?? Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). ⚡️ ⚡️ ⚡️ Kiwi Shop ⚡️ ⚡️ ⚡️ ?? Table of contents Main

Tomiwa Adeyemi 4 Dec 1, 2021
A simple reddit clone

asperitas Asperitas is a full stack reddit clone that I wrote to learn more about Node.js, React, and NoSQL databases. The name asperitas comes from a

Deniz Basegmez 462 Jan 10, 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 small reddit client for browsing the top posts of r/all - built with typescript and react.

snoof A small reddit client for browsing the top posts of r/all - built with typescript and react. Desktop Mobile Features responsive infinite loading

Phoebe Gao 1 Nov 14, 2021
Docker Tutorial | Nodejs + Express + Mongodb + React + Redis + Nginx| Nodejs + Express + Mongodb + React + Redis + Nginx

Docker Tutorial | Nodejs + Express + Mongodb + React + Redis + Nginx How to use Docker to build and develop Nodejs, Express, Mongodb, React, and Redis

null 1 Jan 13, 2022
A simple and complete social network based on Reddit

README Título: Labeddit Descrição: Uma rede social simples e completa realizada

Guilherme Augusto de Almeida Amaral 1 Dec 22, 2021
Dribbble Clone built with MongoDB, ExpressJS, React, and Node Technologies. See demo at https://rb.gy/psll7v

Rumbbble Rumbbble, inspired by the Dribbble design community, serves as a portal for developers to showcase their work, receive feedback, and find ins

Abdul 112 Jan 8, 2022
A simplified Trello clone built with React, Redux, Node, Express and MongoDB.

Trellis A Trello Clone - Built with React, Redux, Express, and MongoDB. ?? : I'm looking for maintainers, feel free to reach out to me on [email protected]

Ayush Aggarwal 94 Jan 8, 2022
An social media platform built using ReactJS, Redux Toolkit,Material UI, Node, Express, MongoDB, JWT and Mongoose.

A social media app using react, material ui, redux on frontend and nodejs, mongodb, and express on backend.

Wasif Baliyan 14 Jan 13, 2022
Mernmap Open Source Application Built With The MERN(Mongodb , ExpressJS, ReactJS, NodeJS)

Meanmap MERNMAP is an interactive map for mern(MongoDB, ExpressJS, ReactJS, NodeJS) Stack Developers all over the world. It provides an avenue where a

Ayeni Olusegun 9 May 24, 2021
Node.js and mongoDB Google Drive Clone

MyDrive MyDrive is an Open Source cloud file storage server (Similar To Google Drive). Host myDrive on your own server or trusted platform and then ac

null 2.6k Jan 15, 2022
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
A Spotify Clone which built with ReactJS. 3rd party API integration, user authentication, spotify API, responsive design, material-ui, react context api are used to built it.

Spotify Clone with ReactJS In this Spotify Clone application you can log in to the application with your spotify account and see your own playlist. Sp

Mert Çankaya 11 Jan 10, 2022
Get Your Parking Permits From Anywhere Web App Built Using React And MongoDB

Get Your Parking Permits From Anywhere ?? Easy-Park Get Your Parking Permits From Anywhere MongoDB, Expressjs, React/Redux, Nodejs Easy-Park is a Web-

Sachin Karki 1 Nov 12, 2021
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
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
A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Özge Coşkun Gürsucu 27 Jan 11, 2022
A Facebook Clone which built with reactJS. You can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

Facebook Clone with ReactJS A Facebook Clone that you can sign in with your Google Account and send realtime posts. Click demo to try it by yourself!

Özge Coşkun Gürsucu 19 Jan 11, 2022