Udagram is a simple application that allows users to register and log into a web client, post photos to the feed, and process photos using an image filtering microservice.
The project is split into two parts:
- Frontend - Angular web application built with Ionic Framework
- Backend RESTful APIs - Node-Express application
tip: it's recommended that you start with getting the backend API running since the frontend web application depends on the API.
- The project depends on the Node Package Manager (NPM). You will need to download and install Node from https://nodejs.com/en/download. This will allow you to be able to run
npm
commands. - Environment variables will need to be set. These environment variables include database connection details that should not be hard-coded into the application code.
A file named set_env.sh
has been prepared as an optional tool to help you configure these variables on your local development environment.
I do not want your credentials to be stored in git. After pulling this starter
project, run the following command to tell git to stop tracking the script in git but keep it stored locally. This way, you can use the script for your convenience and reduce risk of exposing your credentials.
git rm --cached set_env.sh
Afterwards, you can prevent the file from being included in your solution by adding the file to our .gitignore
file.
Create a PostgreSQL database locally using docker postgres image from dockerhub. The database is used to store the application's metadata.
- You will need to use password authentication for this project. This means that a username and password is needed to authenticate and access the database.
- The port number will need to be set as
5432
. This is the typical port that is used by PostgreSQL so it is usually set to this port by default.
Once your database is set up, set the config values for environment variables prefixed with POSTGRES_
in set_env.sh
.
- If you set up a local database, your
POSTGRES_HOST
is most likelylocalhost
Create an AWS S3 bucket. The S3 bucket is used to store images that are displayed in Udagram. Follow this guide on how to create an S3 bucket and configure an IAM user for this project
Set the config values for environment variables in set_env.sh
.
Launch the backend APIs locally. The APIs are the application's interface to S3 and the database.
- To download all the package dependencies, run the command from the directory
udagram-api-feed/
orudagram-api-user/
:npm install .
- To run the application locally, run:
npm run dev
- You can visit
http://localhost:8080/api/v0/feed
in your web browser to verify that the application is running. You should see a JSON payload. Feel free to play around with Postman to test the API's.
Launch the frontend app locally.
- To download all the package dependencies, run the command from the directory
udagram-frontend/
:npm install .
- Install Ionic Framework's Command Line tools for us to build and run the application:
npm install -g ionic
- Prepare your application by compiling them into static files.
ionic build
- Run the application locally using files created from the
ionic build
command.ionic serve
- You can visit
http://localhost:8100
in your web browser to verify that the application is running. You should see a web interface.
- The
.dockerignore
file is included for your convenience to not copynode_modules
. Copying this over into a Docker container might cause issues if your local environment is a different operating system than the Docker image (ex. Windows or MacOS vs. Linux). set_env.sh
is really for your backend application. Frontend applications have a different notion of how to store configurations. Configurations for the application endpoints can be configured inside of theenvironments/environment.*ts
files.- In
set_env.sh
, environment variables are set withexport $VAR=value
. Setting it this way is not permanent; every time you open a new terminal, you will have to runset_env.sh
to reconfigure your environment variables. To verify if your environment variable is set, you can check the variable with a command likeecho $POSTGRES_USERNAME
.