Custom Website Example

SPA project using Marionette.js and Handlebars,
as long with Webpack 5, grunt, ESlint, and Typescript.
Explore the docs »

Open · Donate

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Contributing
4. License
5. Contact
6. Donations

About The Project

This is a simples website that I built a while ago. Has some cool stuff like lazy loading, custom file upload design, and form integration with third-party libraries. If this repository helped you, don't hesitate to leave a star!

Here are some of the features:

• Single-page application behavior using marionette.js and handlebars.js
• Typescript support
• Componentization and focus on code reuse
• Input and mask reactive validations
• Overwrite of native HTML tags like input file and scrollbar
• Aspect ratio SCSS logic which almost mitigates the needs of media queries
• SCSS written using BEM methodology
• Captcha integration
• Grunt and webpack5 bundling
• NPM tasks to watch/build/deploy/test
• ESlint and prettier with custom rules
• Favicon cli generator
• Generation and replacement of .webp images through client-side
• TinyPNG API conversion via cli
• IE 11 support
• Lazy loading
• Custom file upload design and behavior
• Form integration with third-party libraries
• Modular and robust validation routine
• And more

(back to top)

Built With

This section shows what technologies are used in this particular project.

• NodeJS
• Yarn
• Marionette.js
• Handlebars.js
• Typescript
• ESlint
• Sass
• Webpack 5
• Grunt
• Autoprefixer
• Cssmin
• Htmlmin
• Uglify
• Usemin
• Favicon Generator

(back to top)

Getting Started

After cloning the project, you need to do a few things to be able to run it.

Prerequisites

You need to have the following requirements:

• node 16 (download here)

• npm

    npm install -g npm

• yarn

    npm install -g yarn

• grunt cli

    npm install -g grunt-cli

Installation

Below is an example of how you can run the project.

1. Clone the repo

   git clone https://github.com/rinaldilucas/custom-website-example.git

2. Install the dependencies via yarn

   yarn install

3. Build the project to develop

   yarn dev

4. Build the dist folder

   yarn build --tiny-key={apikey}

(back to top)

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/amazing-feature)
3. Commit your Changes (git commit -m 'feat: add some amazing feature')
4. Push to the Branch (git push origin feature/amazing-feature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Project Link: https://github.com/rinaldilucas/custom-website-example

(back to top)

Donations

If you feel that this project has helped you in any way, whether it's attracting clients or teaching you about the technologies used, feel free to make a donation. It helps me a lot to continue developing open-source codes.

• Metamask (USDT):

  0xA0410641515F06fF6a9AdAFf1c3e90a3905ba271

• PIX (BRL):

  72140bc8-fadc-42f5-abb6-9c13cc80a59f

(back to top)