Website with intuitive UI designs

We intend to keep this open source. The plan is to keep the repository up to date with the latest technologies and best practices.

Showcase

This repository contains the working code of Canopas website. You can also check out website to view a live example of this repository.

Services

portfolio

---

Table of contents

• Key features
• Canopas website -- Backend
  • Requirements
  • Setup
• Canopas website -- Frontend
  • Requirements
  • Setup
• Formatting and Linting
• Dependencies
  • Backend
• Licence

---

Key Features

1. Nuxt 3 as Frontend: Canopas website is built using Nuxt 3, a progressive JavaScript framework that offers a flexible and efficient way to build user interfaces. Nuxt is renowned for its simplicity and ease of integration, making it an ideal choice for creating dynamic and interactive web applications.

2. Go as Backend: Backend is developed using Golang. Go is a statically typed, compiled language designed for simplicity, efficiency, and concurrency. With its focus on performance and readability, Go offers a robust foundation for building scalable applications.

3. Server Side Rendering: We have used Nuxt's different rendering modes for the website. For static pages, it is SSG and for dynamic pages, we used SSR/ISR.

4. SEO-friendly URLs and Metadata: We prioritize SEO best practices to ensure that the website receives the visibility it deserves in search engines. From meta tags to URL structure and dynamic sitemaps, canopas website is equipped with all the essential elements for optimal SEO.

5. Responsive and Mobile-friendly Design: We understand the importance of a mobile-friendly design in modern SEO. Canopas' website is fully responsive and adapts seamlessly to various screen sizes, providing a positive user experience across devices.

6. CI/CD and Deployment: With CI in place, every code change is automatically tested and integrated into the main codebase. This ensures that the main branch always remains stable, reducing the chances of bugs and allowing for rapid deployment. This repository contains AWS Lambda, S3, and CloudFront stack for smooth deployment using a cloudformation template.

7. Code formatting and linting: Clean, readable, and consistent code is the foundation of any successful project. This website follows strict code formatting and linting rules, which are enforced through automated tools. This ensures that the codebase remains maintainable and adheres to industry best practices.

8. reCAPTCHA Integration: Security is an important aspect, especially when it comes to user-generated content. Canopas website integrates reCAPTCHA, a widely trusted CAPTCHA service, to protect your site from spam and abuse while maintaining a user-friendly experience.

---

Canopas website -- Backend

Requirements

• Go 1.21

Setup

• Start to Go Server

  go run main.go
  

  If any dependency error is there, run

  go mod tidy
  

  You can access the APIs at http://localhost:8080.

We are using go modules for go package dependency.

• Initialize go modules

  go mod init
  

• By running the above command go.mod file created in the project directory. It includes all packages required in the project.

• Add package to project

  go get package_name
  

• Update package

  go get -u package_name
  

• sync dependency with go.mod

  go mod tidy
  

For writing unit tests in Golang:

• cd to package for which, you want to write test.

  cd package_name
  

• Create a file with a suffix test like packageName_test.go.

• Create a function with the prefix Test like TestFunctionName.

• Run a test using

  go test .
  

  For cleaning the test cache

  go clean -testcache
  

  Here is an APIs reference used in the website.

For generating sitemap :

• Add your pages to templates/path.txt

Canopas website -- Frontend

Requirements

• Node22

Setup

Install dependencies

cd nuxt-frontend && yarn install

Start website in dev mode using,

yarn dev

Compiles and minifies for production

yarn build

You can access the page by pointing a web browser at http://localhost:8080.

Formatting and Linting

The pre-commit hook will automatically lint and format your code before committing.

To enable pre-commit hook

git config core.hooksPath .githooks

Dependencies

Backend

gin

• The core package of the Gin web framework, providing routing, middleware, and other essential features for building web applications.

sqlx

• A library that provides a set of extensions on top of the standard Go database/sql package. It enhances database access with features like named parameters and better scanning into structs.

logrus

• A structured logger for Go. It provides a flexible way to log messages with different severity levels and customizable output formats.

testify

• A popular testing toolkit for Go. It provides various assertion functions and testing utilities to enhance the readability and maintainability of your test code.

cors

• A middleware for Gin that provides Cross-Origin Resource Sharing (CORS) support, allowing controlled access to resources hosted on different domains.

gzip

• A middleware for Gin that enables Gzip compression of HTTP responses, reducing data transfer size and improving performance.

Frontend

VueJs

• It is used to build web interfaces and one-page applications.

Vite

• It is frontend build tool that significantly improves the frontend development experience. We have used it for server side rendering.

Tailwind CSS

• A utility-first CSS framework packed with classes like flex, pt-4, my-4 and text-center that can be composed to build any design, directly in your markup.

Vue collapse transition

• It is used for collapsing elements horizontally or vertically.

FontAwesome

• Used for icons.

Swiper

• Used for Animation.

Credits

This repository is owned and maintained by the Canopas team. If you are interested in building web apps or designing products, please let us know. We'd love to hear from you!

LICENSE

The Canopas website has been released under the GNU V3.