Instalura

Project of Advanced Front-End Bootcamp from Alura using the fabulous JAMStack.

📋 Run online

This project can be tested online, click on badge below:

After user register, you can log in using the default password "senhasegura" since it's a demo project.

👩‍💻 Languages

🧰 Technologies/frameworks

📦 Resources

• Styled components: utilises tagged template literals to style your components.
• Styled normalize: CSS-normalize library for styled-components.
• lodash: A modern JavaScript utility library delivering modularity, performance & extras.
• Google Fonts: Making the web more beautiful, fast, and open through great typography.
• prop-types: Runtime type checking for React props and similar objects.
• Framer Motion: A production-ready motion library for React.
• Lottie: React/Typescript wrapper for awesome Airbnb's lottie-web lib.
• yup: Yup is a JavaScript schema builder for value parsing and validation.
• graphql-request: Minimal GraphQL client supporting Node and browsers for scripts or simple apps.
• jsonwebtoken: An implementation of JSON Web Tokens.

🛠️ Resources for CI/CD

• shelljs: ShellJS is a portable (Windows/Linux/OS X) implementation of Unix shell commands on top of the Node.js API.
• husky: Husky improves your commits and more 🐶 woof!
• commitizen: When you commit with Commitizen, you'll be prompted to fill out any required commit fields at commit time.
• commitlint: commitlint helps your team adhering to a commit convention.
• dependabot: Automated dependency updates
• Github Actions: Automate your workflow from idea to production

Features from Next

• Static pages generated dynamically
• Static content
• Navigation as SPA
• Trailing slash as default for project pages using next.config.js

CMS

This project consume data from Dato CMS using GraphQL.

📋 Run locally

# clone repo
git clone <project>

# install dependencies
yarn install

# run project
yarn dev

# access page
http://localhost:3000/

⚙️Configuration

Environment variables

DATO_CMS_TOKEN=<dato_cms_token>
NEXT_PUBLIC_DATOCMS_URL=https://graphql.datocms.com/
PREVIEW_KEY=<key>

These variables must be configured on:

• .env.local file for local deployment
• Github Secrets for Github Actions CI
• Vercel Environment Variables for build/deploy on Vercel.

🚦 Tests

• Unit tests with Jest.
• React Component tests with React Testing Library.
• Integrations tests (End to End - E2E) with Cypress.

Run unit tests

1. Run all at once: yarn test
2. Run and watch changes (development): yarn test:watch

Run integration tests

1. Headless: yarn test:integration
2. On cypress test suite: yarn test:integration:open

Integration test: create post

Log in, create post, visit post, like and unlike, visit profile, visit home, logout

👨‍🏫/👩‍🏫 Instructors

• Mario Souto (@omariosouto)
• Juliana Amoasei (@JulianaAmoasei)
• Juliana Negreiros (@juunegreiros)

💙 Credits