Atlas Orion

A two-in-one platform which showcases two major features. One is Atlas-Kanban which keeps track of all your tasks separated by boards. The other is Atlas-SSR which generates a server-side rendered about page for you.

Explore the docs »

Report Bug · Request Feature

Table of Contents

• About
• Built With
• Getting Started
  • Building The Project
  • Docker Instructions
• Functionality Overview
• Contributing
• Current Issues
• License
• Contact

About

This codebase was created to demonstrate a fully fledged two-in-one application built with Angular 9 that interacts with a Cloud Firestore database to handle CRUD operations to manage your tasks and boards in Atlas Kanban, authentication, routing, and also renders content using the Server-Side Rendering paradigm with the help of Angular Universal for Atlas-SSR.

Built With

This project has been built with:

• Angular 9
• Cloud Firestore
• Angular Universal
• Docker
• Google Cloud Run
• GCR

Getting started

Make sure you have the Angular CLI installed globally. We use npm to manage the dependencies, so we strongly recommend you to use it. After that, run npm install to resolve all dependencies (might take one minute or thirty depending on your network speed).

Run npm run build:ssr to build the application. After that, run npm run serve:ssr to serve your application. Then, navigate to http://localhost:8080/ to see the application in action.

Building the project

When you run npm run build:ssr , the build artifacts for the client application will be stored under the dist/atlas-orion/browser directory and the build artifacts for the server application will be stored under dist/atlas-orion/server.

Docker Instructions

If you haven't installed Docker already, then you can get it from here. After installing it, create an account in Docker and copy the username.

This application is already dockerized. You can pull the image directly from docker hub:

docker pull alpha037/atlas-orion:latest

OR

You can create your own by following the given steps.

To run the app in a docker container, follow the given steps:

• Clone this repository

  git clone https://github.com/alpha037/atlas-orion

• Navigate to the project directory

  cd atlas-orion

• Replace USERNAME with your own username and build the docker image

  docker build -t <USERNAME>/atlas-orion:1.0 .

• Open up the terminal at the project directory, replace USERNAME with your own username and run the following command:

  docker run -p 8080:8080 <USERNAME>/atlas-orion:1.0

Functionality overview

There are mainly two major features in this application. In a nutshell, Atlas-Kanban is an oversimplified clone of Trello, and, Atlas-SSR is just some server sending you a page when you ask for it. (jokes apart)

The general route breakdown looks like this:

• Home page (URL: / )
  • About Atlas Orion
  • About Atlas-Kanban and Atlas-SSR
  • Justification of the name Atlas Orion
• Sign in/Login page (URL: /login )
  • Authentication and signing in/out users
• Kanban page (URL: /kanban )
  • Manage your tasks and boards as per your requirements
• Customer page (URL: /customers )
  • List of all the customers (or, users, if you will) who generated their about page with the help of our platform
  • Create your own about page
• Customer Detail page (URL: /customers/:id )
  • The actual server-side rendered about page of a customer (or, a user, if you will)

Some important points:

• All the feature modules are being lazy loaded.
• Progressive Web App (PWA) support is enabled for lower First Contentful Paint (FCP) and of course, caching.

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. For more details, check out the contributing guidelines.

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.

Current Issues

Although this project works perfectly fine, however, there's a small caveat present. Currently, server-side rendering with @nguniversal/express-engine and Angular 9 (or, server-side rendering in general with dynamic content) is a bit problematic because developers all around the globe are facing various issues while injecting dynamic meta tags to make pages SEO friendly. Some of the fixes (or, hacks) suggested are working for some of the developers, but not for all.

Needless to say, any help on this matter is highly appreciated. I'll even buy you a cup of coffee as a small token of appreciation! Thanks!

License

Distributed under GNU AGPL 3.0. See LICENSE for more information.

Contact

Shubhranil Dutta - contact@shubhranil.com

Project Link: https://github.com/alpha037/atlas-orion