 |
![Playwright tests] |
|---|
- [course](https://www.udemy.com/course/playwright-tutorials-automation-testing/)
- [playwright-test-coverage](https://dev.to/anishkny/code-coverage-for-a-nextjs-app-using-playwright-tests-18n7)
![![Playwright tests]](https://github.com/ccozens/weekly_events/actions/workflows/playwright.yml/badge.svg){kind=link}
This app is to track of weekly events, and hopefully provide a community resource. I recently moved to Leicester (UK) and could not find a site listing weekly events for babies/toddlers, so I built one. This was part generating a resource, and large part learning project.
| Framework: |  |
| Language: |  |
| CSS: | |
| Database: |  |
| ORM: | |
| Testing: |  |
| Component | Package |
|---|---|
| downshift | event search bar |
| react-google-maps | Google map on each event page |
| react-hook-form | Event and contact forms |
| zustand | Passing state between components |
| nodemailer | Sending email from contact form |
| husky | Running ts-link before commit to typecheck |
In addition to the scripts provided by Next.js, I have added the following: "ts-lint": "tsc --noEmit --incremental --watch", "ts-lint-commit-hook": "tsc --noEmit --incremental", "prepare": "husky install"
| Image | Source | Notes |
|---|---|---|
| Favicon | svg from freeSVG | converted/generated scripts at Real Favicon Generator |
| Hero image | unsplash | Photo by Artem Kniaz, Ukranian photographer turned solider |
I used many! I have listed them in the order I used them, and I have tried to give credit where I can. I have also listed the tutorials I used to learn the tech stack.
- I had already used Next.js and TypeScript, so didn't do anything specific here.
- When I first used Next.js I started with the official Next.js tutorial. Note this app is next.js v13.3 using the Page Router. v13.4, which migrates to the App Router, came out while I was writing it. I may update in the future.
- I took this Microsoft Typescript tutorial to get started with TypeScript. The react typescript cheatsheet is a great resource.
- Next.js x prisma
- My intro to prisma, and this is a lot of the reason I used Prisma and supabase. I was undecided what to use, and finding this tutorial from Vercel decided for me.
- Note I took this tutorial when it was using supabase, and they have since launched Vercel Postgres.
- husky and ts-lint pre-commit typecheck hook
- I kept getting type errors on build, and this was a great way to catch them before they happened. I'd never used husky before, and this was a real eye-opener of how simple and powerful it is.
- playwright
- the docs give a great intro and this was enough to get me up and running for UX tests. I struggled with test structure and mocking APIs, so:
- udemy course
- I did this.
- Nodemailer x gmail x OAuth2
- after a few false starts I found this tutorial, which helped me get not only Nodemailer but also (the bit I was having problems with) OAuth2 set for fmail set up properly.
- this Kevin Powell video
- was a great help in changing my mindset for CSS from styling on desktop and setting media queries for max-width for smaller screens, to styling for mobile and setting media queries for min-width for larger screens. This was an interesting concept switch and especially useful for this project, which I envisage as being used primarily on mobile.