greenCSS - write design with this zero emission

⚠️ merged repo from omenCSS - @ commit 435

Getting Started

Install the dependencies

# install all dependencies
npm i

# ⚠️ If error, install husky and cypress manually
npm install husky --save-dev
npm install --save-dev cypress

Run the development server:

# start the localhost server and cypress
npm run e2e

# backup
npm run dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

cypress commands

# open cypress GUI
npm run cypress:open
# run all cypress tests in the console
npm run cypress:run
# manually get code coverage
npx nyc report --reporter=text-summary
npx update-badge

esLint commands

# default nextjs eslint command
npm run lint
# fix eslint errors by running prettier
npm run prettier

env file

Create a .env.local file. Sendgrid will be used for the contact features.

NODE_ENV=development
PUBLIC_URL=http://localhost:3000
NEXT_PUBLIC_BACKEND_API=http://localhost:8000/api
NEXT_PUBLIC_API_URL=http://localhost:8000/api
SENDGRID_API_KEY=YOUR-SENDGRID-API-KEY
SENDGRID_MAILING_ID=YOUR-SENDGRID-CONTACT-LIST-ID
SENDGRID_EMAIL=YOUR-SENDGRID-EMAIL
NEXT_PUBLIC_GOOGLE_ANALYTICS=YOUR-GOOGLE-ANALYTICS-KEY
NEXT_PUBLIC_STRIPE_KEY=YOUR-PUBLIC-STRIPE-KEY
STRIPE_SECRET_KEY=YOUR-SECRET-STRIPE-KEY
NEXT_PUBLIC_MAPBOX_KEY=YOUR-MAPBOX-KEY
PUBLIC_BACKEND_URL=http://localhost:8000 || YOUR URL POINTING TO YOUR BACKEND

• sendgrid
• STRIPE

Github actions

• In order to follow best practices, simple github actions have been implemented.
• greenCSS checks for EsLint errors (according to our .eslintrs.json rules) before pushing to the repo.
• greenCSS checks the code for prettier violations (according to our .prettierrc file) before pushing to the repo.
• greenCSS checks if the build process is completed successfully before pushing to the repo.
• greenCSS tests the code with cypress before pushing to the repo.

Markdown Editor

Create new markdown posts and save it. All features, configuration and documentation are fetched from markdown files. A suitable editor can be found at: http://localhost:3000/editor

SCSS Structure - 7:1

Keeping the architecture consistent and meaningful is even more of a challenge.

A common and effective modular method for structuring Sass projects is the 7-1 pattern. This approach will be used in the development process of this project.

A possible structure could look as follows (as of July 2022)

sass/
|
|– abstracts/
|   |– _variables.scss    # Basic Project Variables
|   |– _font.scss         # Font Related Files
|   |– _color.scss        # Colour Mixins
|   |– _index.scss        # Sass Index File
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _index.scss        # Sass Index File
|
|– components/
|   |– _animation.scss    # Animations
|   |– _buttons.scss      # Buttons
|   |– _input.scss        # Input
|   |– _markdown.scss     # Markdown
|   |– _modal.scss        # Modal
|   |– _nav.scss          # Nav
|   |– _slider.scss       # Range Slider
|   |– _toast.scss        # Toast
|   |– _index.scss        # Sass Index File
|
|– layout/
|   |– _index.scss        # Sass Index File
|
|– pages/
|   |– _brand.scss        # Custom Brand Styles
|   |– _landing.scss      # Custom Landing Page Styles
|   |– _index.scss        # Custom Page Styles
|
|– themes/
|   |– _index.scss        # Sass Index File
|
|– vendors/
|   |– _leaflet.scss      # Leaflet addition
|   |– _index.scss        # 3rd Party Solutions
|
 – globals.scss              # Main Sass Input File

Contribute

Check the contributing file for more details.

1. Fork the repo and create your branch from main.
2. If you've added code that should be tested, add tests.
3. If you've changed APIs or added new dependencies, update the documentation.
4. Ensure the test suite passes.
5. Make sure your code lints.
6. Use semantic versioning for commits.
7. Issue a pull request!

Basic Frontend Libraries

	Stars	Bundle size	Maintained	Dev- Mode
next		N/A	✅	➖
sass			✅	➖
react-select			✅	➖
react-md-editor			✅	➖
next-remove-imports			✅	➖
fast-average-color			➖	➖
tinycolor2			➖	➖
gray-matter			➖	➖
react-markdown			✅	➖
react-syntax-highlighter			✅	➖
purgecss			✅	✅
@sendgrid/mail			✅	✅
remark-gfm			✅	✅
axios			✅	✅
@stripe/stripe-js			✅	✅
stripe			✅	✅
mapbox-gl			✅	✅
react-map-gl			✅	✅
isbot			✅	✅

Testing Libraries

	Stars	Bundle size	Maintained	Dev- Mode
cypress			✅	✅
@cypress/code-coverage			⚠️	✅
check-code-coverage			➖	✅

Automated Workflow Libraries

	Stars	Bundle size	Maintained	Dev- Mode
prettier			✅	✅
eslint			✅	✅
eslint-config-prettier			✅	✅
husky			✅	✅
lint-staged			✅	✅
semantic-release			✅	✅
@commitlint/cli			✅	✅
@commitlint/config-conventional			✅	✅

Sources

Illustrations
title	Leaf Illustration
source	Figma
author	seda
license	CC-BY-4.0
changes	Changes were made to the fill- colours, line & shadow adjustments.
----------	------------------------------------
title	MacBook-Pro-2021-Free-Figma-Mockups-BRIX-Templates-Community
source	Figma
author	BRIX Templates
license	CC-BY-4.0
changes	N/A
----------	------------------------------------
title	Financial Tech Landing Page
source	Figma
author	Ilham Meidi
license	CC-BY-4.0
changes	Used light background for desktop inspiration
----------	------------------------------------
title	Miniverse 3D illustrations
source	Figma
author	Dddkit
license	CC-BY-4.0
changes	-
----------	------------------------------------
title	People 3D Avatar
source	Figma
author	Spectrum UI
license	CC-BY-4.0
changes	-
----------	------------------------------------
title	Wolf 3D Character
source	Figma
author	BLRDY
license	CC-BY-4.0
changes	-

Ideas & Inspiration

• Toast
• ToC
• Newsletter
• Captcha
• Google Analytics
• Stripe
• Map Tile
• ImageRenderer
• Navigation