rgadigital / nerderla-atomic-design

Example app for Nerderla-Atomic-Design

NERDEAR.LA ATOMIC DESIGN WORKSHOP

Explore the docs »

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Environment Variables
  • Installation
  • Run
  • Tools
• Contributing and Workflow

Resources

*Please ask for access to this resource with the team

• Figma

Built With

• ReactJS
• SASS
• CSS Modules
• NextJS
• GraphQL
• Wordpress

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

A list of things that you need to install for run the project.

• Node LTS

• Yarn

brew install yarn

If you're a Windows user, download the installer.

Environment Variables

Environment variables are defined in Dotenv files. Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.

For the build to run successfully, you will need to create a .env that contains the following data:

NEXT_PUBLIC_CF_SPACE_ID=
NEXT_PUBLIC_CF_ENV=
NEXT_PUBLIC_CF_DELIVERY_ACCESS_TOKEN=

For security reasons, the specific values are not included in this README and the files are not checked in to source control.

Installation

1. Clone the repo

git clone https://github.com/RGADigital/Nerderla-Atomic-Design

2. Install NPM packages

yarn install

3. Start the server

yarn dev

Run

• Storybooks To test all the components that are being used on the site, use storybooks.

$ yarn storybook

• Linting

$ yarn lint

• Development

$ yarn dev

• Production (with server)

$ yarn install
$ yarn build
$ yarn start

Opening in Development Container

Open the cloned project in VS Code. Once you open it, you will see a popup with the text Folder contains a Dev Container configuration file. Reopen folder to develop in a container., click the Re-open in Container button and a new Docker container will be created and dependencies will be automatically installed for you.

Tools

• ESLINT: ESLINT
• JS: ES6 compiled by Babel
• Component Dev: Storybook
• Linting & Formatting: ESLint, Prettier, Stylelint and EditorConfig.*

*It is strongly recommended that you integrate these tools into your editor or IDE.

Contributing and Workflow

This are our basics steps for start working in this project.

1. Clone the Project
2. Create your Feature branch from develop (git checkout -b feature/___)
3. Commit your Changes (git commit -m 'Add some feature')
4. Push to the Branch (git push origin feature/___)
5. Open a Merge Request