ccozens / weekly_events

local_events

	![Playwright tests]

to do

return to 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)

attend to issues from codeclimate

Weekly Events

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.

Tech stack

Main stack

Framework:
Language:
CSS:
Database:
ORM:
Testing:

Smaller components

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

Additional scripts

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"

Parts I removed and might come back to

• react-geolocated

Images

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

Tutorials

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.