Guideline for building project
Tags: productivity
Published: 2020-07-26 08:31:09

Hi, I am a lazy frontend developer come from Vietnam, the man looking for original values.

---

Today I wanna share my checklist, step by step to build a project from zero to hero. I have three stage: preparation, development and maintenance.

This post will cover the first part - preparation. I will keep updating whenever I remember anything else. You may need to read [my old post](https://dev.to/shinabr2/how-to-build-a-website-from-scratch-in-2020-2339) to see how I reduced time for development process, especially for backend. Any feedback will be highly appreciated.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q1unx3smu8rlbukwmeyy.jpg)

## High level Steps

Follow these steps:
- Buy a domain.
- Follow next part to setup environments.
- Find solution for these problems:
	- Law/Copyright related problems.
	- Your site terminologies and policy.
	- User requirements and Software requirements.
	- Change logs and roadmaps.
	- How to get feedback from users and how to response.
	- Define basic flow for designer.
	- Define all `Call-to-Action`(s).
	- Define all URLs.
	- Define all sub-domain.
	- Think about migration, replication from any environment to production environment.
- Prototyping your product
	- Design Wireframe using [balsamiq](https://balsamiq.com/).
	- Prototyping using [axure](https://www.axure.com/).
	- Design basic database using [dbdiagram.io](https://dbdiagram.io/home).

## Technical used

Related technologies:
- [GraphQL](https://graphql.org/) is the core.
- [Firebase](https://firebase.google.com/) for Authentication and Cloud Functions.
- [Google Analytics](https://analytics.google.com/).
- [Sentry](https://sentry.io/) for error reporting.
- [GatsbyJS](https://www.gatsbyjs.org/) for frontend development.
- [Hasura](https://hasura.io/) for auto generating APIs from database.
- [Cloudinary](https://cloudinary.com/) for static resources hosting.

Related tools:
- [Gitlab](https://gitlab.com/) to store source code and your official documentation should be placed here also.
- [Slack](https://slack.com/intl/en-vn/) to get all notifications.
- [Netlify](https://www.netlify.com/) is everything you need for deployment.
- [Heroku](https://www.heroku.com/) fastest way to deploy Hasura.
- [Cloudflare](https://www.cloudflare.com/) is my favorite CDN and more.
- [balsamiq](https://balsamiq.com/) for mockup.
- [axure](https://www.axure.com/) for prototyping your product.
- [dbdiagram.io](https://dbdiagram.io/home) for fast database modeling.
- [Trello](https://trello.com/) is free, simple, fast and easy to use for task management.
- [stackedit.io](https://stackedit.io/app#) is my favorite online markdown note.

## Technical Setup Steps

Some note:
- Only have two environments: `development` and `production`.

Following these steps:
- Setup Gitlab project and wiki pages.
- Setup Firebase project.
- Setup Google Analytics.
- Setup Sentry.
- Setup Netlify deployment for static files.
- Setup Heroku deployment for Hasura.
- Setup Cloudinary.
- Save all configurations in Gitlab Wiki page.
- Slack integrations.
- Domain configurations.
- Resources Management.

## Environment Setup Checklist

### Gitlab

- Create new project and wiki home page to link all your wiki pages created later.
- Create new wiki page for "Technical Configurations" and link to above home page.

### Firebase

- Setup Firebase projects for both environments. After this steps, we have both `Firebase config object` for both environments.

### Google Analytics

- Setup Google Analytics, we just need only one property. We should disable Google Analytics in development environment. After this step, we should have `Tracking ID` string.

### Sentry
- Setup only project for both environments. After this step, we should have Sentry `DSN` string.

### Netlify

- Setup new site in Netlify from Gitlab repository.
  - Check domain and sub-domain configurations.

### Hasura

Follow these steps to setup development environment for Hasura. We should ONLY create production environment after testing development environment successfully.
- [Deploy Hasura to Heroku](https://hasura.io/docs/1.0/graphql/manual/guides/deployment/heroku-one-click.html#heroku-one-click).
- [Secure Endpoint](https://hasura.io/docs/1.0/graphql/manual/deployment/heroku/securing-graphql-endpoint.html#heroku-secure).

### Cloudinary

Create an account for both environment or multiple account for each environment, totally optional.
Folder structure:
- common: for all resources used for all environments.
- development: all resources used for development environment only.
- production: all resources used for production environment only.

After this step, we should have some variables like `API Key`, `API Secret` and some URLs for CDN.

### Save Configurations

Update all configurations into "Technical Configurations" wiki page created before.
- Two `Firebase config object` for both environments.
- Google Analytics Tracking ID.
- Sentry DSN.
- Hasura configurations:
	- `HASURA_GRAPHQL_ADMIN_SECRET` (development environment).
- Cloudinary:
	- `Cloud name`.
	- `API Key`.
	- `API Secret`.
	- `API Environment variable` (optional).
	- `Base delivery URL`.
	- `Secure delivery URL`.

### Slack Integrations

All below are minimum requirements.
- Source code:
	- New Pull Request.
	- New push on [default](https://docs.gitlab.com/ee/user/project/repository/branches/#default-branch) / [protected](https://docs.gitlab.com/ee/user/project/protected_branches.html) branches.
	- New pipeline on [default](https://docs.gitlab.com/ee/user/project/repository/branches/#default-branch) / [protected](https://docs.gitlab.com/ee/user/project/protected_branches.html) branches.
	- Wiki pages changes.
- Deployment:
	- New deploy started.
	- Successful deploy.
	- Failed deploy.
- Task management:
	- New task created.
	- Task is ready to be reviewed.
- Analytics and Report:
	- Goal achievement.
	- Error occurred.
	- New period report.
	- New feedback from user.

### Domain Configurations

- Setup some notable DNS records:
	- A records for domain, sub-domain, api, etc.
	- MX/TXT records for email.
- Setup nameservers (Netlify/Cloudflare).
- Force HTTPS + SSL/TLS.
- Cloudflare nice to have checklist:
	- Setup Firewall.
	- Setup Rate Limiting.
	- Auto Minify static files.
	- IPv6 Compatibility.


## Resources Checklist

For social sharing:
- Site Metadata:
	- Title
	- Title template
	- Description
	- Author
	- Twitter Username
- Upload images on Cloudinary:
	- Logo, cover.
	- Share image.
	- Icons.
- Mock images (background, avatar, etc).