Framer Stock Logo Framer Stock
Designaroni Next screenshot

Designaroni Next

Author Avatar Theme by Designaroni
Updated: 4 May 2023
6 Stars

Repo for Designaroni front end built on Next JS

Github Live Preview

Categories

Nextjs React Scss Strapi Portfolio

Overview

The Designaroni Next project is a web application built with Next.js, TypeScript, GraphQL, and other technologies. It uses a headless CMS backend hosted on Digital Ocean and AWS to serve a GraphQL API to the frontend. The project includes features such as Framer Motion for animations, Phosphor Icons for iconography, SASS and CSS Modules for styling, and various linting and testing tools. The project is hosted on Vercel and can be deployed easily using their platform. Overall, Designaroni Next is a versatile and customizable web application built with modern web development technologies.

Features

  • Next.js: The project is built with Next.js, a popular React framework that provides server-side rendering, routing, and other powerful features.
  • TypeScript: TypeScript is used for type-checking and improving developer productivity and code quality.
  • GraphQL: The project uses GraphQL as a data query language to fetch data from the headless CMS backend.
  • Framer Motion: Framer Motion is used for animations, providing smooth and visually appealing transitions and effects.
  • Phosphor Icons: Phosphor Icons is a collection of high-quality icons that are used throughout the application for visual elements.
  • SASS & CSS Modules: SASS and CSS Modules are used for styling, allowing for modularity and easy maintenance of styles.
  • Prettier & ESLint: Prettier and ESLint are used for code formatting and linting, enforcing code style and improving code quality.
  • Stylelint: Stylelint is used for linting SCSS code, ensuring consistent and error-free styling.

Installation

To install the Designaroni Next project, follow these steps:

  1. Clone the repository from GitHub.

    git clone https://github.com/username/designaroni-next.git

  2. Navigate to the project directory.

    cd designaroni-next

  3. Install dependencies using yarn.

    yarn install

  4. Copy the example environment variables file.

    cp env.example .env.local

  5. Update the variables in the .env.local file to match your local development environment. Make sure to set the HOSTNAME variable to localhost.

  6. Start the development server.

    yarn local

  7. Open http://localhost:3000 in your browser to see the application.

Summary

Designaroni Next is a web application built with Next.js, TypeScript, GraphQL, and other modern web development technologies. It offers a range of features including animations, iconography, SASS and CSS Modules for styling, and linting tools for code quality. The installation process involves cloning the repository, installing dependencies, setting up environment variables, and starting the development server. Overall, Designaroni Next is a versatile and customizable web application that can be used as a starting point for building web projects.