It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Last update: Jun 26, 2022

Overview

Twitter-Clone_Front-end

✨ Demo.

Login	Home

Profile	Message	Notifications

Deployed in: https://twitter-clone-front-end.vercel.app/

💻 About the project.

This is an initial version of a project for educational purposes, so it is not fully developed yet, so it may present different errors. Likewise, only some functionalities have been implemented. Over time, some other features that twitter has will be added.

Test accounts:

User: UserTest Password: 123
User: UserTest2 Password: 123

📜 Descriptions.

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

🏆 Specifications.

I can see my profile or others' profile
When I am on a profile, I can see Tweets and Retweets. I can also filter by Tweets, Tweets and replies, Media and Likes
When I am on a profile, I can see followers and following
When I am on a profile, I can see follow or unfollow the user
I can navigate between Home, Explore and Bookmarks
I can navigate to My Profile, Group Chat (optional), Setting/Authentication App.
When I am on Home, I can post a new Tweet
When I post a new Tweet, I can choose to upload an image and set the Tweet to be public or only-follower
When I am on Home, I can see Tweets of people who I follow
I can Comment, Retweet, Like or Save a Tweet
I can Comment with image and I can like a comment
I can see the posted time of the Comments and Tweets
When I am on Home, I can see the most popular hashtags and people I should follow (it's up to you how to implement this)
When I am on Explore, I can see the Top, Latest Tweet, or Tweet with Media. I can also choose to see the most popular people
When I am on Bookmarks, I can see the Saved Tweet
I can search for a group

⭐ Languages.

🎨 Frameworks.

💾 Databases and cloud hosting.

🛠️ Software and Tools.

🚀 Getting Started.

📌 Prerequisites and dependencies.

👉 Installation.

In your local repository

npm install

⚡ Executing.

npm start

☕ Collaborators.

📝 License.

💬 Contact.

Mario Quirós Luna

Isabel Portuguez Calderón

Jorge Madrigal Solano
Bryan Soto Ureña

💜 Acknowledgments.

Comments

Login
Default Page

Layout/Styles

Redirect to Login Page and SingUp Page

SigUp Page

Fix Layout and Styles

Register user

Login Page

Fix Layout and Styles

Login user

Likes

Fix likes with the differents logged in users

Pull neccesary on BackEnd: https://github.com/MarioQuirosLuna/Twitter-Clone_Back-end/pull/25
opened by MarioQuirosLuna 0
Profile
On this pull is necessary use backend is running for the data: https://github.com/MarioQuirosLuna/Twitter-Clone_Back-end/pull/10

Using user from backend

Bugs fixing

Show profile and home data using backend

Show profile and home images using backend
opened by MarioQuirosLuna 0

A common front-end/Service Worker-based Key/Value database based on CacheStorage

Cache-DB A common front-end/Service Worker-based Key/Value database based on CacheStorage const db = new CacheDB('ChenYFanDB') undefined await d

Sep 30, 2022

Online Inventory Control System for an apparel manufacturing company "CASANOVA" (Pvt) Ltd. Technology stack: Node.js, Express.js, MongoDB Atlas, React.js (MERN Stack).

Project Name - Online Inventory Control System for an apparel manufacturing company "CASANOVA". The project was given a "A" grade. Group Leader - IT20

Dec 26, 2021

Reddit is a website where a community of registered users ( redditors) submits content. Its format resembles a traditional bulletin board system, allowing users to post messages and links to other websites and comment on each other's posts. Entries are ranked by a voting system; other users can vote comments and posts either up ( upvoted) or down.

Setup First, run the development server: npm run dev Open http://localhost:3000 with your browser to see the result. You can start editing the page by

Jun 23, 2022

A simple in-memory key-value cache for function execution, allowing both sync and async operations using the same methods

A simple in-memory key-value cache for function execution, allowing both sync and async operations using the same methods. It provides an invalidation mechanism based both on exact string and regex.

Dec 15, 2022

An innovative new front-end for Ultraviolet that is prominent in both speed and looks

Lucid Proxy An open-source proxy using the Ultraviolet backend by TN, Lucids purpose is to end internet censorship. Self Host Features CAPTCHA and hCA

Dec 14, 2022

Most of my pride is here. I put a lot of love into this.

Develop Please use yarn npm i -g yarn for dependencies. Npm is really terrible for CI/CD. To start developing, you need to run two commands simulateno

Sep 4, 2022

a temporary solution to revert to the old ui. the new ui was put into effect since april

Revert-YouTube-UI a temporary solution to revert to the old ui. the new ui was put into effect since april and is slowly rolling out to users. Feature

May 10, 2023

A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up 🔥 👨‍💻 A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

Dec 12, 2022

A sequence of smart contracts to practice gas optimization. These are used as practice assignments for RareSkills.io and the Udemy Gas Optimization Course

RareSkills Gas Puzzles Puzzles that are ready for you Distribute (hard) Array Sum (easy) Escrow EscrowV2 Mint Presale Require (easy) Staking Contribut

Dec 31, 2022

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Related tags

Overview

Twitter-Clone_Front-end

✨ Demo.

💻 About the project.

📜 Descriptions.

🏆 Specifications.

⭐ Languages.

🎨 Frameworks.

💾 Databases and cloud hosting.

🛠️ Software and Tools.

🚀 Getting Started.

📌 Prerequisites and dependencies.

👉 Installation.

⚡ Executing.

☕ Collaborators.

📝 License.

💬 Contact.

💜 Acknowledgments.

You might also like...

Comments

Owner

Mario Quirós Luna

It is a solo Project and In this repo I try to build a E-Commerce full-stack website with MERN stack technologies. For Practice purpose.

HackFest is a 36-hour long hackathon wherein you have to put on your hacker hats and build anything that falls in either or both the domain of full-stack web development

🚀👩‍🚀This repo contains all the files to follow along and implement a MultiChain NFT MarketPlace! Be sure to watch my Youtube tutorials so you can learn and follow along!

This is a full-stack exercise tracker web application built using the MERN (MongoDB, ExpressJS, ReactJS, NodeJS) stack. You can easily track your exercises with this Full-Stack Web Application.

Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

This blog is still under development! I present a project scope for science articles, it can now be used in production! But there are some details that need to be put up front.

Web-Technology with Aj Zero Coding. In this tutorial we learn front-end and back-end development.

Pass trust from a front-end Algorand WalletConnect session, to a back-end web service

A technology stack solution using the AWS Serverless architecture.Atlas stack for building applications focused on generating value.