🪲 Scarab is a social media where you can make a post that can be liked and commented by other users. 🪲

🧑‍🤝‍🧑 Scarab - Social Media | | Concluded 🧑‍🤝‍🧑

About   |    Layout   |    Lauching the project   |    Technologies   |    Author

💡 About the project:

🪲 Scarab - Is an application that allows the users to meet and interact with another person by an unificated interface, you can interact with someone's post by likes or even comments.

🤓 The project was developed with the main purpose of being a greate orportunity to me to train my skills with ReactJs, styled-components and GraphQL for the frontend, and with NodeJs and GraphQL in the backend.

📈 The project was an essential opportunity to develop skills with ReactJs, styled-components, GraphQL, NodeJS and other technologies.

🔎 More informations:

This repository contains an REST API developed with NodeJs AND GraphQL as backend and a web application developed with ReactJs, both of them in JavaScript.

GraphQL : is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. GraphQL was developed internally by Facebook in 2012 before being publicly released in 2015.

🎨 Layout of the Application:

🖥️ Desktop Layout:

SignUp Screen:

Login Screen:

Home Screen:

Inspect Post Screen:

📇 Tablet Layout:

📱 Mobile Layout:

🚀 Launching the project:

The project is divided in two main parts:

1. Backend (backend folder)
2. Frontend (frontend folder)

💡 Is required that the backend is in execution to work.

Pre requirements

Before start, you should need have installed in your computer those following tools:

Git
Node.js

It is also recommended a good code editor, for example:

VSCode

⚠️ Before all, you must have created a project in the MongoDB website, you also have to do a 'config.js' file in the root of the back end part, exporting your MongoDB server connection and you JWT key with the name of 'SECRET_KEY'. With this done you are ready to go.

⚙️ Starting the Backend (Server API):

# Clone the Repository
$ git clone https://github.com/ViniciusResende/Scarab.git

# Enter the poject folder in the Terminal
$ cd Scarab

# Go to the server folder
$ cd backend

# Install all the dependencies 
$ npm install
 or
$ yarn install

# Execute the appliction with this command
$ npm run server
 or 
$ yarn run server

# The server will start in the port:5000

---

💻 Starting the Frontend (Web):

# Clone this Repository
$ git clone https://github.com/ViniciusResende/Scarab.git

# Enter the poject folder in the Terminal
$ cd Scarab

# Go to the mobile folder
$ cd frontend

# Install all the dependencies 
$ npm install
 or
$ yarn install

# Execute the appliction with this command
$ npm start
 or
$ yarn start

# The application whill start in the port:3000 

---

👨‍💻 Used Technologies:

Those following tools were used in the project development:

Frontend (ReactJs + styled-components)

• @apollo/client
• apollo-link-context
• graphql
• graphql-tag
• jwt-decode
• moment
• react-toastify
• styled-icons

Server (NodeJS + GraphQL)

• apollo-server
• bcryptjs
• graphql-tag
• jsonwebtoken
• moment
• mongoose

🙋‍♂️ Author

Vinícius Alves