Next.js website for E2E

Related tags

Learning resource Web
Overview

Prérequis

  • git (obviously)
  • node >= 14 avec npm

Sur MacOS ou Linux, je suggère fortement d'utiliser Node.js Version Manager afin de simplifier l'installation et la gestion de node.

Getting Started

  1. Cloner le dépôt
  2. Installer les dépendances
  3. Démarrer le serveur de développement
git clone [email protected]:E2E-Squad/Web.git E2E-Web
cd E2E-Web
npm install
npm run dev

Ouvrir http://localhost:3000 dans un navigateur pour voir le résultat.

Styleguide

Afin de contourner les problèmes rencontrés lors des multiples tentatives d'intégration du styleguide avec Next.js, le styleguide possède son propre serveur et ses propres dépendances. Il importe néanmoins les composants du projet automatiquement.

Il se peut donc que quelque chose fonctionne sur le site principal, mais pas sur le styleguide, ou inversement. Si le cas se présente, merci de privilégier le site principal et signaler un bug sur le styleguide.

Tous les composants sont importés automatiquement depuis le répertoire components/ à la racine du projet.

  1. Aller dans le répertoire styleguidist
  2. Installer les dépendances
  3. Démarrer le serveur de développement
cd E2E-Web/styleguidist
npm install
npm run styleguide
You might also like...

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

Getting Started First, run the development server: npm run dev # or yarn dev Open http://localhost:3000 with your browser to see the result. You can s

Dec 5, 2022

✨This is My Personal Website's Source Code. 👨‍💻 I Make it with Next.js and WindiCSS

🌐 drackin.tk This is my personal website with Next.js + WindiCSS ☁ Weather API You can use my Weather API to see weather of locations. Simple Request

Dec 15, 2022

Um website completo desenvolvido com Next SSR, Typescript, Prismic CMS do tipo blog com diversas funcionalidades para interações entre os usuários.

Um website completo desenvolvido com Next SSR, Typescript, Prismic CMS do tipo blog com diversas funcionalidades para interações entre os usuários.

Título: Spacetraveling Descrição: Um website completo desenvolvido com Next SSR, Typescript, Prismic CMS do tipo blog com diversas funcionalidades par

Dec 21, 2022

Starter template for a personal website blog, built with Next.js, MDX, and Tailwind CSS.

nextjs-mdx-blog-theme View: demo site Framework: Next.js Deployment: Vercel Content: MDX Styling: Tailwind CSS Running Locally $ git clone https://git

Dec 26, 2022

My personal website built with Next.js, TypeScript, twin.macro, Framer Motion, MDX and deployed on Vercel.

chrvaskos.com My personal website / blog built with some of my favorite technologies where I can showcase my work and write articles about anything ne

Mar 25, 2022

⚡ Personal website and blog made using TypeScript, Next.js, Tailwind CSS.

⚡ Personal website and blog made using TypeScript, Next.js, Tailwind CSS.

小康 blog View Demo · Report Bug · Request Feature 🌍 honghong.me Framework: Next.js Database: Planetscale ORM: Prisma Authentication: NextAuth.js Deplo

Dec 31, 2022

A Technical Blogging Website that utilizes Notion as a CMS for ease of modification with the help of the notion-API & whose content has been rendered with next-js and react-notion-x

A Technical Blogging Website that utilizes Notion as a CMS for ease of modification with the help of the notion-API & whose content has been rendered with next-js and react-notion-x

GDSC MCE Blogs This repo is what GDSC MCE uses to power their blogging website gdsc-mce-blogs. It uses Notion as a CMS, fetching content from Notion a

Dec 16, 2022

A meditating website to clear your mind. Built with Next.JS and TailwindCSS ♥

Meditate A modern meditation web app for you to meditate on your own terms. Track your progress and share your thoughts with others. Table of Contents

Jul 27, 2022

🎬 Movie, TV Series and Actor website made with TMDb, Next.js and TailwindCSS.

🎬 Movie, TV Series and Actor website made with TMDb, Next.js and TailwindCSS.

Movie App Demo Getting Started 🛠 Development Server npm install --s --f && npm run dev # or yarn install && yarn dev 🛠 Production Server npm install

Dec 27, 2022
Comments
  • Créer un composant Icon

    Créer un composant Icon

    Ce composant doit afficher une icône en SVG. Il serait d'ailleurs judicieux de définir une bibliothèque d'icône pour l'application. Nécessaire avant de merge #8

    enhancement 
    opened by loichu 2
  • Styleguide Update

    Styleguide Update

    Atoms

    Button

    Available in 2 versions:

    • Classic (.btn)
    • Danger (.btn--danger)

    Image Container

    Contains an image and can be shaped (Square, Circle, Rectangle) and sized (Small, Medium, Large, Big) using enum properties (Shape and Size. It is responsive out-of-the-box unless you choose to make it Adaptive sized in which case it will fill the parent. It is then parent's responsibility to be responsive. The image automatically covers the container in any case.

    Message

    Message contained in a box.

    Molecules

    ChatCard

    Similar to Message excepts it also takes a pseudo which will be displayed on the left of a default image on top of the message. By default the message is a left message (.chat-card-container) but it can also be a right message (chat-card-container--right).

    Nav

    It takes an array of link objects and makes it a list of links.

    UserCard

    Exists in 2 versions:

    • classic (main-user-card)
    • full (main-user-card--full)

    It displays a user with a default profile picture, a pseudo and a rating (react-stars). There is also a warning icon on the top right but it doesnt do anything yet nor serve any purpose. In full mode it also displays a location, a rank and a button "Notifier".

    Organism

    Header

    Displays a menu with a default app icon and default user avatar. It takes The user path and the title as well a styleClass as parameters.

    opened by loichu 0
  • Basic styleguide + composnent + docs structure

    Basic styleguide + composnent + docs structure

    • react-styleguidist configured
    • Atoms Molecules Organisms components structure
    • Simple Button component
    • Create first component documentation
    • README.md Getting Started
    opened by loichu 0
  • Loichu/normalize button + proto pages home/login/register

    Loichu/normalize button + proto pages home/login/register

    • Ajouté le bouton style secondary
    • Ajouté des exemples pour les boutons
    • Reset CSS d'un lien dans un bouton
    • Normalisé les props du bouton
    • Découplé le bouton du style global (mixin)

    Prototypes:

    • Composant Layout
    • Homepage avec logo + texte
    • Login avec fake creds: batman bat
    • Register avec champs + handle des fichiers

    Il serait judicieux de mieux uniformiser les pages en utilisant le layout et utiliser un outil comme Formik pour gérer les formulaires.

    opened by loichu 0
Owner
null
GitHub
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A demo for E2E build piplelines in Design Systems using monorepo's and automation :zap:.

Design System Pipelines demo What is it? A working demonstration for end-to-end build piplelines in Design Systems using Primer Primitives, Primer CSS

Rez 7 Oct 20, 2022
A small utility server to exchange data and messages between clients. Comes complete with E2E public key encryption

Zenotta Intercom A small utility server to exchange arbitrary data between clients. Comes complete with E2E public key encryption Official documentati

Zenotta AG 7 Oct 2, 2022
A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Prisma ORM. Deploys to Fly.io

Live Demo · Twitter A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Pris

Remix Stacks 18 Oct 31, 2022
Metamask replacement for your E2E tests.

Headless Web3 Provider Metamask replacement for your E2E tests. Why "headless"? Because it doesn't have a visual interface, reject (or accept) transac

Emil Ibatullin 6 Dec 13, 2022
🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

Next.js Image Proxy Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component. ❔ Motivation This library makes it poss

Blazity 30 Dec 1, 2022
next-graphql-server is a library for building production-grade GraphQL servers using Next.js with API Routes

next-graphql-server next-graphql-server is an easy to use Next.js library for creating performant GraphQL endpoints on top of Next.js API Routes. Star

Jakub Neander 82 Nov 21, 2022
💻 A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools.

⚡ Next Typescript Template ⚡ A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools. Quic

João Gabriel 13 Nov 23, 2022
A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui

Welcome to FullStack Next.js template ?? A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui ✨ Demo Tech Ne

Avneesh Agarwal 10 Oct 16, 2022