Udagram

Pipeline Status (master Branch):

This application is a post based social media platform. It is like Instagram but for posts. It is also like Snapchat but for posts. And you can embed images and links in posts. All you need to do is to sign up then you can start sharing your thoughts in the world of Udagram via our posts. It consists of frontend and backend. Frontend is built using Angular framework and backend is build using Node.js and Express.js in typescript. It is also linked with circleci to auto deploy the application on AWS on any push to the master branch. S3 is used for hosting the frontend, another S3 is used to store media files, elastic beanstalk for hosting the backend and RDS postgres DB for storing the posts and users.

Live Preview

http://ahassan-udagram-frontend.s3-website-us-east-1.amazonaws.com/

Overview

S3 Bucket

Elastic Beanstalk

RDS

Last success circleci build

Environment Variables of CircleCi

Infrastructure

S3 Bucket that hosts the frontend which is built using Angular framework.
S3 Bucket that hosts the media files.
Elastic Beanstalk that hosts the backend which is built using Node.js and Express.js in typescript.
RDS that hosts the postgres DB which is built using postgres.

Pipeline Overview

After the developer pushes the code to the master branch, the pipeline starts.

CircleCi is triggered to start the build.
Checkout the code from the repository.
Install AWS & Elastic Beanstalk CLI.
Configure AWS Credentials.
Install frontend dependencies.
Install backend dependencies.
Build frontend.
Build backend.
Run frontend tests.
Deploy frontend to S3.
Deploy backend to Elastic Beanstalk.

Required Tools

- Node v14.15.1 (LTS) or more recent. It is always advisable to keep node to latest LTS version.

- npm 6.14.8 (LTS) or more recent, Yarn can also work.

- AWS CLI v2, v1 can work but was not tested for this project.

- Elastic Beanstalk CLI.

- A RDS database running Postgres.

- An S3 bucket.

- An Elastic Beanstalk environment.

- A CircleCI project.

Installations

Install AWS CLI

You can follow this tutorial to install AWS CLI. https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html

Install Elastic Beanstalk CLI

You can follow this tutorial to install Elastic Beanstalk CLI.(Read README.md file) https://github.com/aws/aws-elastic-beanstalk-cli-setup

Create a new Elastic Beanstalk Application

You can follow this tutorial to create a new Elastic Beanstalk Application. https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/GettingStarted.CreateApp.html

Create a RDS postgres Database

Navigate to RDS dashboard.
Click on the Create New Database button.
Choose Standard Create, PostgreSQL V12.8-R1.
Choose free tier and type your instance name and user and password
Make sure you are using Burstable classes of db.t2.micro and disable storage autoscaling if enabled.
Make sure to check Public access yes.
In Additinoal configuration, type your database name which you will use in application.
Click on the Create database button.
After Creating the database, we need to whitelist any inbound IP address to access the database.
1. Choose your RDS database from the list of instances.
2. Scroll to and click on Connectivity & Security tab and click search for vpn security group and click on it.
3. Make sure the security group that belong to your DB is selected and click on Inbound Rules then click edit Inbound Rules
4. Click on the Add Rule button choose type All Traffic, Secure custom and type 0.0.0.0/0 then click save rules.
Now you can access your database by using the endpoint that in Connectivity & security tab which are inside the created RDS.

Create a S3 Bucket

Open cmd and type "aws s3api create-bucket --bucket --region ".
Now after creating the bucket, go to your bucket permissions tab then to Block public access and uncheck the checkbox.
Next step is to create a policy for your bucket. permissions tab search for bucket policy and click edit.
Put the following text into Policy replacing (your-bucket-name) with your bucket name: { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::(your-bucket-name)/*" ] } ] }
Now this is the time for configuring the static website hosting, go to properties tab.
Search for static website hosting and click edit.
Enable it and choose host a static website then type index.html in index document and click save.
You can upload files to your bucket by using the following command: aws s3 cp --recursive --acl public-read <local-file-path> s3://<your-bucket-name> [![]( 9- Now you can access the website by clicking in the link that appears in Properties/static web hosting.

Getting Started In your local machine

Clone this repo locally into the location of your choice by running the following command: git clone https://github.com/AhmedMohammed3/udagram.git
Move into udagram/udagram-api folder and run the following command: npm install
Create .env file in udagram/udagram-api folder and add the following lines:
1. POSTGRES_USERNAME=<your_db_user>
2. POSTGRES_PASSWORD=<your_db_password>
3. POSTGRES_DB=<your_db_name>
4. POSTGRES_HOST=<your_db_host>
5. DB_PORT=<your_db_port>
6. PORT=<your_preferred_server_port>
7. JWT_SECRET=<your_jwt_secret>
8. AWS_BUCKET=<your_aws_bucket_name>
9. aws_region=<your_aws_region>
Run the following command to start the server: npm start
Move into udagram/udagram-frontend folder and run the following command: npm install
Go to src/environments/environment.prod.ts and change the url to your bucket url.
Go to src/environments/environment.ts and change the url to your local server url.
Run the following command to start the application: npm start

Testing

This project contains two different test suite: unit tests and End-To-End tests(e2e). Follow these steps to run the tests.

cd starter/udagram-frontend
npm run test
npm run e2e

There are no Unit test on the back-end

Unit Tests:

Unit tests are using the Jasmine Framework.

End to End Tests:

The e2e tests are using Protractor and Jasmine.

Built With

Angular - Single Page Application Framework
Node - Javascript Runtime
Express - Javascript API Framework

AhmedMohammed3 / udagram