juliswer / demo-1-frontend

StackIt SDK

Next.js. v0.0.1

↓ Explore the docs ↓

Stackit SDK Guide Terraform Guide

View Demo

About The Project

A GitHub template can be a valuable tool when starting a new project. By using a template, many hours of work can be saved, as the template already includes a basic structure and predefined functionalities that fit the project's needs.

In the specific case of Stackit, a GitHub template can help the company speed up project development and ensure code quality and application functionality. By using an internal template, the company can customize the template to fit their needs and ensure internal standards and best practices are met.

Built With

• 

• 

• 

• 

• 

• 

  
  
  

Naming Convention and Folder Structure

Common Folder

• Configuration
• • [fileName].config.ts
• Constants
• • [fileName].constants.ts
• Enums
• • [fileName].enum.ts
• Services
• • One on each folder (named as dash-case)
• • • [fileName].service.ts
• Types
• • [fileName].types.ts
• Utils
• • [fileName].util.ts

Components Folder

• [CamelCaseFolder]
• • [CamelCaseFile].tsx

Features Folder

• app
• • actions
• • • [myActionFolder]
• • • • [myActionFile].ts
• • • • [myActionFile].spec.ts
• • process
• • • commands
• • • • [myCommandFolder]
• • • • • [myCommandFile].command.ts
• • • • • [myCommandFile].command.spec.ts
• • • errors
• • • • [myCommand].errors.enum.ts
• • • command.type.ts
• • • create-command.stack.ts
• • services
• • • [myServiceFolder]
• • • • myServiceInterface.service.ts (for interfaces)
• • • • myService.service.mock.ts (for mocks)
• • • • myService.service.ts (for the service)
• • store
• • • app.slice.ts
• • • [myExtraReducer].extraReducers.ts
• • • • [extraReducerAction].ts (follow the structure)
• auth
• • Same that on app folder

Images folder

• icons
• • [myIcon].[imageFormat]
• • • Note: If it's an image that will be used on many sites, just add it to the root path with dash-case. Otherwise, add a folder with the name of the page where it'll be used (in dash-case case as well) and add it.

Layout:

• [MyFolder]
• • [MyFile].tsx
• Wrapper.tsx (required)

Store:

• Hooks
• • [myHook].ts
• ui
• • ui.slice.ts
• store.ts

Styles

• Globals css at the root path (using dash-case)
• Add a folder with the page where the style will be used and the file inside (both of them with dash-case)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

1. Create a new repository from stackit-sdk-nextjs

   They will start with the same files and folders as stackitgroup/stackit-sdk-nextjs.

2. Clone the repo

   git clone https://github.com/your_username_/Project-Name.git

3. Install Yarn packages

   yarn install

4. Enter your APIs in variables.tf

   variable "API_KEY" {
      type        = string
      default     = "ENTER YOUR API"
      description = "ENTER YOUR DESCRIPTION"
    }

5. Enter your API in .env

   API_KEY = 'ENTER YOUR API'

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.

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