Treeform: Angular Example Webapp

Demo

https://blissful-lalande-6f6f74.netlify.app/

---

What is this repo?

This repository is maintained by Thedroid.io team, is meant to be a beautiful web-app example using Angular 9.0+, this is implemented not only for the client-side, but for server side rendering also (Note: If you need Server Side rendering read here).

This project contains all of the latest technologies, from design to developemnt, and common features needed in static webapp like Progressing webapp read here, SEO [ search engine].

Table of contents

• About
• Getting started
• Features
• Components
• Breaking changes
• FAQ
• Contributors

Getting Started:

• Node version > 10
• Angular > 9.0

Initial Setup

git clone https://github.com/nirajprakash/treeform-angular-webapp.git 
cd treeform-angular-webapp
npm install
npm start

Graphics Magick setup

This part of setup is needed, if you want to convert images for gallery

• Install image magick from here for your system's OS.
• For more details read here

For PWA

• Clone the project you haven't done that.
• then checkout into branch: treeform-pwa

git checkout treeform-pwa
npm install
npm start

For SSR

• Clone the project you haven't done that.
• then checkout into branch: treeform-pwa-ssr

git checkout treeform-pwa-ssr
npm install
npm start

Note: If you get any errors during install and build, please put report the issue in the same repo.

Features:

These are some of the important features implemented in this starter!

• SEO: Search Engine Optimization

  • Programmable seo tags.

• PWA: Progressive Webapp

  • For more details, read here

• SSR: Server Side Rendering

  • For more details, read here

• Fully responsive design using flex properties

  • Responsiveness without using any grid based library.
  • Usage of next generation Flex-Layout library provided by Angular Team.

• SCSS based atomic styling

  • Avoided css style based large files.
  • Scss helps in improving overall quality and pattern of styling.
  • For more details, read here

Components:

These are some of the important components in this app!

• Image Gallery

  • Very common gallery system needed in all apps.

• Angular Animations

• SEO: Programmable Tags

  • For more details, [read here](#seo:-programmable tags)

Image Gallery

PWA: Progressive Webapp

SSR: Server Side Rendering

SCSS: Styling

Theming

Common Files

SEO: Programmable Tags

FAQ:

Does this library require bootstrap?

No! There isn't a requirement of this library. The design is implemented only using angular material and SCSS styles.

Contributors:

Bharath Kishore

Mayank Kaushal

Niraj Prakash