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.
# 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
# default nextjs eslint command
npm run lint
# fix eslint errors by running prettier
npm run prettier
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
- 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.
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
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
Check the contributing file for more details.
- Fork the repo and create your branch from
main
. - If you've added code that should be tested, add tests.
- If you've changed APIs or added new dependencies, update the documentation.
- Ensure the test suite passes.
- Make sure your code lints.
- Use semantic versioning for commits.
- Issue a pull request!
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 | ✅ | ✅ |
Stars | Bundle size | Maintained | Dev- Mode | |
---|---|---|---|---|
cypress | ✅ | ✅ | ||
@cypress/code-coverage | ✅ | |||
check-code-coverage | ➖ | ✅ |
Stars | Bundle size | Maintained | Dev- Mode | |
---|---|---|---|---|
prettier | ✅ | ✅ | ||
eslint | ✅ | ✅ | ||
eslint-config-prettier | ✅ | ✅ | ||
husky | ✅ | ✅ | ||
lint-staged | ✅ | ✅ | ||
semantic-release | ✅ | ✅ | ||
@commitlint/cli | ✅ | ✅ | ||
@commitlint/config-conventional | ✅ | ✅ |
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 | - |