Twitter Clone Application

Overview

A simple Twitter clone application built using React.js, GraphQL, Node.js and MongoDB.

Screenshots

Signup page:

Homepage page:

Signup Form:

Login Form:

Message page:

Live version

Backend version: https://twitter-clone-node-app.herokuapp.com/
Frontend version: https://gracious-khorana-ceda2c.netlify.app/

Getting Started

Running with Docker

To run this application using Docker just follow the steps below:

1. Clone this repo
2. Cd into the {root_director} directory and run docker-compose up -d to build the frontend and backend application Docker images
3. Run docker-compose up -d again to start the fronted and backend application Docker images
4. Navigate to http://localhost:3000/ to view application

Running Locally

To run this application locally just follow the steps below:

1. Clone this repo
2. Cd into the {root_directory}/server directory and run npm install
3. Cd into the {root_directory}/client directory and run npm install
4. Run command export REACT_APP_GCP_CLIENT_ID=<GCP_CLIENT_ID>(see below on how to obtain GCP Client ID)
5. Run node index.js from {root_directory}/server directory
6. Run npm start from {root_directory}/client

Get Google Cloud Platform Client ID

Go to https://console.cloud.google.com/ and create a new GCP project. Then in the sidebar navigate to 'APIs & Services' -> 'Credentials'. In the following screen, click on 'Create Credentials' and follow the prompt. Finally, the Client ID will be shown in the 'Credentials' screen

Prerequisites

Make sure you have the following technologies installed before running this project locally:

• Node.js
• npm package manager
• MongoDB
• MongoDB Compass(optional)

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

1. Get a free API Key at https://example.com
2. Clone the repo

   git clone https://github.com/your_username_/Project-Name.git

3. Install NPM packages

   npm install

4. Enter your API in config.js

   const API_KEY = 'ENTER YOUR API';

(back to top)

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

(back to top)

Roadmap

• Added login & registration functionality
• Added 'Create Tweets' feature in homepage
• Add unit tests for Homepage and Signup page
• Add OAuth2 authentication in Signup page

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)