Ignite-Lab-2

Technologies | Project | Layout | IDE | Licence

PRs welcome! License

🚀 Technologies

This project was developped using the following technologies:

📚 Libraries

🛠 Utilities

SVG

SVG to JSX Converter

Icons

Phosphor Icons

Deploy

Vercel

📐 Project

This project… Check the project online here. Sections: Header, Navigation, Home, About, Services, Testimonials, Contacts and Footer.

🔖 Layout

The basic layout project can be accessed in this link in your Figma account.

💻 IDE

This project was done using Visual Studio Code IDE.

🧩 VS Code Extensions

⚙ VS Code Configuration

CRTL + SHIFT + P
- settings.json

{
    /* Define o tema do VS Code */
    "workbench.colorTheme": "Dracula",
    /*"workbench.colorTheme": "Omini", */
    "workbench.iconTheme": "material-icon-theme",

    /* Configura tamanho e família da fonte */
    "editor.fontSize": 18,
    "editor.lineHeight": 24,
    "editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.wordWrap": "on",
    "workbench.editor.tabSizing": "shrink",
    "explorer.compactFolders": false,

    /* Aplica linhas verticais para lembrar quabra de linha em códigos muito grandes */
    "editor.rulers": [80, 120],
    "editor.formatOnSave": false,
    "editor.minimap.enabled": false,

    "window.zoomLevel": -1,
    "explorer.confirmDelete": false,
    "terminal.integrated.shell.osx": "/bin/zsh",
    "tabnine.experimentalAutoImports": true,
    "python.languageServer": "Pylance",
    "explorer.confirmDragAndDrop": false,
    "editor.accessibilitySupport": "off",

    /* Formatter */
    "prettier.tabWidth": 4,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.trailingComma": "none",
    "prettier.arrowParens": "avoid",
    "prettier.endOfLine": "auto",
    "editor.tabSize": 4,
    "editor.formatOnSave": true,

    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.doNotVerifyTags": true,

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    "workbench.editorAssociations": {
        "*.ipynb": "jupyter.notebook.ipynb"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    }

    /*"eslint.packageManager": "yarn", */
    /*"eslint.autoFixOnSave": true, */
}

Ignite-Lab-2

Ignite Lab 2

Vite Create a new Vite project.

npm create vite@latest

Give it a name.
Choose the framework you want to use: ‘react’.
Choose ‘react-ts’ ro use TypeScript in your project.
Enter to the project folder.
Install the dependencies:
```
npm i
```

Execute the Project

npm run dev

Install the Development dependencies:

npm i tailwindcss postcss autoprefixer -D

Create the tailwindcss and postcss configuration files

npx tailwindcss init -p

CMS: Content Management System. It is used to manage the content (frontend and backend) of the website.
Headless CMS: CMS without a frontend.

Clone the GraphCMS project here.

Install Apollo dependencies

npm i @apollo/client graphql

Install Phosphor Icons dependencies

npm i phosphor-react

Install Date FNS dependencies

npm i date-fns

Install Vime JS dependencies

npm i @vime/core @vime/react --force

Install React Router DOM dependencies

npm i react-router-dom

Install Classnames dependencies

npm i classnames

Install GraphQL Codegen as development dependencies

npm i graphql @graphql-codegen/cli -D

Install GraphQL Code Generator plugins as development dependencies

npm i @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo -D 

📝 Licence

This project is under the MIT license. See the file LICENSE for more details.

Done with ♥ by Douglas Dias Leal

This site is open source. Improve this page.