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.

Overview

Twitter-Clone_Front-end

GitHub issues GitHub closed issues GitHub pull requests

GitHub contributors GitHub repo size GitHub language count GitHub forks

Demo.

Login Home
Initial Home
Profile Message Notifications
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:

  1. User: UserTest Password: 123
  2. 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.

HTML CSS Javascript

🎨 Frameworks.

React

Sass

💾 Databases and cloud hosting.

🛠️ Software and Tools.

Git GitHub ESlint

Vercel

VisualStudioCode

🚀 Getting Started.

📌 Prerequisites and dependencies.

  • React
  • React-Dom
  • React-Scripts
  • Axios
  • Sass
  • React-router-dom
  • Mui/material
  • Mui/icons-material
  • Emotion/styled
  • Emotion/react

👉 Installation.

In your local repository

npm install

Executing.

npm start

Collaborators.

  • Mario Quiros Luna
  • Isabel Portuguez Calderón
  • Jorge Madrigal Solano
  • Bryan Soto Ureña

📝 License.

💬 Contact.

  • Mario Quirós Luna

Website LinkedIn Twitter URL

  • Isabel Portuguez Calderón

LinkedIn Twitter URL

  • Jorge Madrigal Solano
  • Bryan Soto Ureña

💜 Acknowledgments.

You might also like...

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

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

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.

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
Comments
  • Login

    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

    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
Owner
Mario Quirós Luna
Estudiante de la Universidad de Costa Rica, Informatica Empresarial, Sede Turrialba.
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.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Alok Kumar 5 Aug 3, 2022
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

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 (the stack we learn in full-stack web developer roadmap on codedamn).

Shivam Kumar 2 Jun 6, 2022
🚀👩‍🚀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!

Multi-Chain NFT Marketplace ?? ??‍?? This repo contains all the files to follow along and implement a MultiChain NFT MarketPlace! Be sure to watch my

Net2Dev 30 Jan 5, 2023
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.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

WMouton 2 Dec 25, 2021
Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

PersonalBlog This project was generated with Angular CLI version 13.0.1. Front-end Interface Development server Run ng serve or ng serve --configurati

null 9 Oct 5, 2022
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.

Science-Blog ?? Attention! This blog is still under development! I present a project scope for science articles, it can now be used in production! But

Raissadev 2 Sep 19, 2022
Web-Technology with Aj Zero Coding. In this tutorial we learn front-end and back-end development.

Installation through NPM: The jQWidgets framework is available as NPM package: jQuery, Javascript, Angular, Vue, React, Web Components: https://www

Ajay Dhangar 3 Nov 19, 2022
Pass trust from a front-end Algorand WalletConnect session, to a back-end web service

AlgoAuth Authenticate to a website using only your Algorand wallet Pass trust from a front-end Algorand WalletConnect session, to a back-end web servi

Nullable Labs 16 Dec 15, 2022
A technology stack solution using the AWS Serverless architecture.Atlas stack for building applications focused on generating value.

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

Atlas 9 Dec 15, 2022