ost-cas-fee-adv-23-24 / nextjs-app-pixelpioneers

nextjs-app-pixelpioneers created by GitHub Classroom

Mumble Next.js App: Team PixelPioneers

Next.js App 🚀

Table of Contents

1. Getting Started
2. Folder Overview
3. Run scripts
4. Pre-requisites
5. Authentication
6. Built with
7. Bootstrapped with
8. Usage
9. Technology Stack
10. Collaboration
11. Developers
12. Licence

Getting Started

This is a Mumble project which we attend the CAS Frontend Engineering Advanced course at the OST, University of Applied Study in Rapperswil SG.

Folder Overview

• src: Components, compositions, helpers, models and services

• src/components: Components

• src/compositions: Compositions

• src/helpers: Helpers

• src/models: Models

• src/services: Services

• app/: Actions, Auth, Home, Create Post, User and Posts

Run scripts

In the project directory, you can run:

npm run dev runs the development server http://localhost:3000.
Open your browser to see the result.

npm run lint checks lint.

npm run lint:fix fixes lint.

npm run prettier runs prettier.

npm run prettier:check check code-format with prettier and print out warnings if available.

npm run build creates you a build directory.

npm run start starts the Next.js web application.

npm run test:pw runs Playwright tests.

npm run test:pw:debug debugs all tests run the Playwright test command followed by --debug flag.

npm run test:pw:headed will give you the ability to visually see, how Playwright interacts with the website.

More about Next.js

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Pre-requisites

We need the npm package manager to install this library.

npm install npm@latest -g

Authentication

These two points are used for our Web App:

• NextAuth.js
• IdP (Identity Provider): Zitadel

API (Swagger)

• Mumble API

Built with

[![Jest][Jest]][Jest-url]

🔒 next-auth NextAuth.js. Authentication for the Next.js web application.

Bootstrapped with

This is a Next.js project bootstrapped with create-next-app.

Usage

How to run locally

1. Cloning

git clone https://github.com/ost-cas-fee-adv-23-24/nextjs-app-pixelpioneers

2. Installing NPM

npm install

3. Adjust environment variables: .env.local and .env.test

• .env.local
• .env.test

4. Run the app in dev mode

npm run dev

Open the browser and run the web with http://localhost:3000.

For having more information related this configuration, it can be found here: Install Tailwind CSS with Next.js.

Technology Stack

📎 Link Get started with Tailwind.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

📎 Link Prettier
npm install --save-dev --save-exact prettier

📎 Link postcss
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack. It also supports Autoprefixer. See the part of Tailwind above.

📎 Link husky / Git hooks
You can use it to lint your commit messages, run tests, lint code and many more when you commit or push. See here husky - github.

📎 Link lint-staged
Run linters against staged git files and don't let 💩 slip into your code base! Linting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style. Check there lint-staged - github.

📎 Link ESLint
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, see also ESLint - npm.

📎 Link commitlint
commitlint checks if your commit messages meet the [conventional commit format](commitlint checks if your commit messages meet the conventional commit format). See also commitlint - github.

📎 Link clsx
A tiny (234B) utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module.

Collaboration

Development Agreement

Conventional Commits

A specification for adding human and machine readable meaning to commit messages, see also Conventional Commits.

Contribution

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 name: enhancement. Don't forget to give the project a star! ⭐️ Thanks! 🙏

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

Developers

👋 Nico Lutz - write an e-mail to Nico 👨‍💻
👋 André Ceres - write an e-mail to André 👨‍💻

Test Mocking

See the setup and usage of Mocks Server in /docs/mocks-server-getting-started.md.

Licence

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