This project contains the source code of my personal portfolio available on: snio.dev.

Importante Update • Requirements • Running Up • Development Considerations • Ackownledgments • Self Promotion • License

---

IMPORTANTE UPDATE

From now on this project will mantain integration with Sanity Studio. Follow my Sanity Studio project to get the panel source code base here.

REQUIREMENTS

This project was built using:

• Nextjs
• Styled Components
• React Helmet
• TypeScript
• Sanity.io

RUNNING UP

If you want to run this application localy, follow the steps bellow.

1. Cloning repository

   $ git clone https://github.com/sineto/snio.dev

2. Install dependencies

   # This project uses Yarn as package manager.
   # So, install Yarn first.
   $ npm install --global yarn
   
   # install project dependencies
   $ cd snio.dev
   $ yarn install

3. Running Next.js server in develop mode

   $ yarn dev

4. Running Next.js server in production mode

   $ yarn build
   $ yarn start

DEVELOPMENT CONSIDERATIONS

This project is being developed under some standards that I intend to follow.

1. Environment variables:

   The code base requies some environment variables:

   • API_URL: the host from the application will fetch data.
   • NEXT_PUBLIC_SANITY_PROJECT_ID: hash ID of a Sanity project thats can get on dashboard Sanity.io account.
   • NEXT_PUBLIC_SANITY_PROJECT_DATASET: dataset name of a Sanity project thats can get on dashboard Sanity.io account.
   • NEXT_PUBLIC_SANITY_PROJECT_TOKEN: hash token API of a Sanity project thats can get on dashboard Sanity.io account.

   1.1 Create .env file file inside root directory:

   $ echo 'API_URL=http://localhost:3000' >> .env
   $ echo 'NEXT_PUBLIC_SANITY_PROJECT_ID=xxxxxxxx' >> .env
   $ echo 'NEXT_PUBLIC_SANITY_PROJECT_DATASET=development' >> .env
   $ echo 'NEXT_PUBLIC_SANITY_PROJECT_TOKEN=project-token' >> .env

2. Commit stage

   Before every commit action some triggers took automations.

   • Git commit message need to follow the Angular Commit Message Guidelines;
   • ESLint will check some patterns based on StandardJs rules;
   • Prettier will format the code out of the rules. Those rules was based on my own preferences;

3. Running code linter manually

   $ yarn lint

4. Running code format manually

   $ yarn format

ACKNOWLEDGMENTS

• This project was built during Fullstack Master class by DevPleno.
• The layout credits mainly go to Logan Cee.

SELF PROMOTION

Do you like this project? Come on:

• Star and follow the repository on GitHub.
• Follow me on
  • GitHub

LICENSE

MIT License