AlexVascon / Twitter-clone

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Twitter clone

Just finished Ironhack bootcamp. I'm building a full stack social media app to practise and improve my knowledge in web technologies by attempting to mimick twitter.

Tech Stack

Client: React

Server: Node, Express, MongoDB

Installation

Install twitter clone with npm in the client and server package.

cd twitter-clone/server
  npm install 
cd twitter-clone/client
  npm install 

Environment Variables

To run this project, you will need to add the following environment variables to your .env file in both client and server. My plan is to eventually deploy the app to show off functionality. If you decide to fork and run the project you need an email account for nodemailer and a cloudinary account for image uploads. Set those details in the fields below.

client .env

REACT_APP_API_URL=

server .env

PORT=
ORIGIN=
DB_NAME=
MONGODB_URI=
CLOUDINARY_NAME=
CLOUDINARY_KEY=
CLOUDINARY_SECRET=
TOKEN_SECRET=
EMAIL_USER=
EMAIL_PASS=
SITE_URL=

Running Tests

To run tests, run the following command

  npm run test

Lessons Learned

Learning mongodb documentation to improve performance and decrease load time. Seperating calls and data extraction to only when needed.

This is an ongoing process.

Acknowledgements

dummy profile and cover images in screenshot are from Vecteezy

Usage

  • Signup - with a valid email and password containing uppercase, number, and special character. An email will be sent with a verification code for the next step.
  • Login - two step process, first email, then password. Redirect to profile on succesful Login.
  • Logout - follow arrow to feed, press avatar and menu will display logout

I dont use twitter so I made an account and based navigation on mobile experience. Still working to add all features.

Screenshots

App Screenshot App Screenshot App Screenshot App Screenshot App Screenshot

About


Languages

Language:JavaScript 88.2%Language:CSS 10.6%Language:HTML 1.2%Language:Shell 0.0%