https://github.com/mui/material-ui/tree/master/docs/data/material/getting-started/templates/checkout
wizzard

Dynamic Routing
https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing/components

site transitions:
https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions

UserStory:
As a User,
I want to navigate from a Landing Page through features e.g. form and Card Collection,
so that I have a better UX.

AC:

• Navigate from home to collection and Onboarding
• Hero Element
• Welcoming text
• Carousel Function/Cards can be scrolled horizontally
• Wizzard/Funnel registration

• Optimise Import of Icons, allway Named import "....icon" form "mui_icon_special"

User Story:
As a User,
I want to upload my profile picture,
to have an individual picture.

AC:

• Image get saved on cloundinary
• Card Image rendering from cloudinary

Complexity Index: S

User Story:
As a User, I want to see different Instructors, to choose from.

AC:

• Card Information is stored in zustand
• Cards are created from Information
• Collection displays in Chip-layout
• Collection can change between layouts

Complexity Index: S | S

UserStory:
As a User,
I want a cool Layout,
so that I like to browse for Instructors.

AC:

• Typography setup
• Add Filter Button
• Arrangement of Elements on Card (Overlay Image, Add Icons instead of Text (language, day, services)
• Improve Carousel
• Gallery Grid Responsive Design
• Gallery Toogle-Card-View

User Story:
As a Instructor-User, I want to set and save my infos and skills, to be seen by other users.

AC:

• Form Input element exists with needed information for card
• Submitted Information is saved locally with zustand
• User gets a confirmation of upload
• Card can be rendered out of stored information

Complexity Index: M | L

As a Developer,
I want to save Form Entries on MongoDB,
so that I have an accessible permanent storage system.

AC:

• Post request gets send to MongoDB
• Form data get send with post request

UserStory:
As a User,
I want to check in and out of my lessons,
so that I have control about the lenght of the lesson.

• App need a checkin system up meeting e.g. barcode scan
• both parties need to agree on end of lessson

As a Instructor-User,
I want to show which Tricks&Services (e.g. Savety, Surfstyles, BK) I teach,
so Surfers can book more specialised services.

As a Surfer-User,
I want to make a detailed selection of what and how I learn in my lessen and make a list of my skills and wished skills automatically,
to save my data for next bookings and see my progress.

• Surfer can address Instructor with template
• Instructor needs list of choosable lesson (checkboxes) what services to offer
• Surfer needs form with checkbox of lesson content to choose from
• Instructor list should be filtered after desired services or skills
• Surfer and Instructor should be able to see edit list of skills and services in profile

Complexity Index: M

As a Surfer User,
I want my data to be stored securely,
to send my necessary Information to the teacher and with no access data.

AC:

• Information stored by registration, initial booking or on editing wish.
• Display Information necessary for Instructor: Name, Number, Geschlecht, Alter, Gewicht, Größe, Konfektionsgröße, Verletzungen, Ängste, Beeinträchtigungen, Erfahrung
• Display optional Information: Surf Equipment (Kites, Neo, etc.), Buchungshistorie, Tricks-wishlist

UserStory:
As a User,
I want to send a message to an Instructor,
so that I can book a lesson.

AC:

• able to send email to on random email
• able to send email to selected email

Tasks:

• Read Nodemailer Tutorial
• Read Next.js Readme Nodemailer
• Read Nodemailer + Next.js Article

Complexity Index: M

UserStory:
As a Instructor-User,
I want to get individualised message from Users,
so that I have all necessary information for the lesson.

AC:

• form to make necessary information
• send email to group of instructors / only date-filtered cards

Necessary Infomation:

Complexity Index: M

UserStory:
I as Surfer&Instructor-User,
want to log in,
to have my profile data saved.

AC:

• LogIn works with Google
• LogIn Data needs to be saved on Server
• Profil Data is connected to LogIn Data
• LogIn and Callback functions work on vercel

Weitere Infos:
https://github.com/vercel/next.js/tree/canary/examples/auth0

https://github.com/gladly-team/next-firebase-auth

As a Instructor-User,
I want to see all open requests, get notified when a new offer arises and be able to answer it,
so that I can easily find jobs.

• There is a list with open requests for instructors
• Instructors get contacted by email when new request get posted
• Instructor can answer request by seeing contact data
• Surfer get answer with ticket acceptance
• Surfer can close ticket upon confirmation

As a Surfer User,
I want my data to be stored securely,
to send my necessary Information to the teacher and with no access data.

AC:

• Information stored by registration, initial booking or on editing wish on database
• Display Information necessary for Instructor: Name, Number, Geschlecht, Alter, Gewicht, Größe, Konfektionsgröße, Verletzungen, Ängste, Beeinträchtigungen, Erfahrung
• Display optional Information: Surf Equipment (Kites, Neo, etc.), Buchungshistorie, Tricks-wishlist

Complexity Index: M

As a User,
I want to easily send a request to instructors,
so that I can book as fast as possible.

• Surfer can send a request
• Request gets to all Instructors in area
• Contact Information is registered
  ( - [ ] Locations need a grouping mechanism)
• Request contains all Information about Surfers requested service

UserStory:
As a Instructor,
I want to define open working slots,
so that Surfers can book according to my schedule.

• Instructor Card shows open, bookable lessons
• Instructor can add lessons hours

As a Instructor-User,
I want to show which Tricks&Services (e.g. Savety, Surfstyles, BK) I teach,
so Surfers can book more specialised services.

As a Surfer-User,
I want to make a detailed selection of what and how I learn in my lessen and make a list of my skills and wished skills automatically,
to save my data for next bookings and see my progress.

• Surfer can address Instructor with template
• Instructor needs list of choosable lesson (checkboxes) what services to offer
• Surfer needs form with checkbox of lesson content to choose from
• Instructor list should be filtered after desired services or skills
• Surfer and Instructor should be able to see edit list of skills and services in profile

Complexity Index: M

UserStory:
As a Developer,
I want to fetch all my data from Mongo DB,
so that I have one ordered, central serversided data storage system.

AC:

• GET-Request: Render cards out of db
• POST: Check Card request & delete Zustand

UserStory:
As a User,
I want to see a header,
so that the UI is better.

AC:

• Navigation works

• links toward gallery/home
• with Login and links towards profile
• is styled

• Navbar shows actual page
• Navbar is styled with MUI theme
• Dialog is styled
• Code is refined and commented
• Navbar works on vercel!

https://github.com/vercel/next.js/tree/canary/examples/svg-components

• SVG import
• Haken wenn Images Uploaded/selected/
• Upload aufteilen
• Add Helpertext if error
• Location Autocomplete to add Locations
• Add Licence Upload
• Orientation of checkboxes
• Input Placeholder Adornment- label stylin
• Refactor Fieldnames variables
• React from hook (silke)

As a Developer,
I want to be able to save data locally and read data from a server,
so that I can keep data.

AC:

• Data gets saved in Zustand and as a local JSON file when json server is running
• MongoDB get connected
• Able to use Routing for a GET request

UserStory:
As a User,
I want to see where the instructor are,
so that I can decide quickly where to book my lessons.

AC:

• App shows a map
• App shows a marker for user and locations (or instructors)

• Marker Icon-Locaction,

• Multiple
• Animated
• Color?

• PopUp Marker
• Costume Map Color
• load location from DB
• Mehrere Marker für trainer, evtl. variable nummer
• Location setzen & zu Coords zu Marker
  https://egghead.io/lessons/react-use-geojson-io-to-draw-custom-marker-and-shape-features-for-a-react-leaflet-map

User Story:
As a User, I want to filter for Locations, to find a Instructor

AC:

• Filter as FAB opens possible Location select field
• Only Instructor on Location are shown as result

Complex Index: S | M

User Story:
As a User, I want to see an instructor, to get information about him.

AC:

• Card shows an Name, Image, Location, Price, License and Contact Button
• Extends further information:
  • Language
  • Further locations
  • Motto and Introduction Text
  • Contact Information
  • Services (Pickup, Material, )
  • Availabilities

Follow Up #9

Complexity Index: S | M

DeveloperStory:
As a Developer,
I want to have an simple LogIn and Registration,
so that I have a prove of concept for later LogIn Options.

AC:

• have a working github login
• save Login data on MongoDB

Complexity Index: S

Developer Story:
As a Developer,
I want to setup my Developer Environment,
so that I can start developing with all my utilities.

AC:

• Next.js based
• all important dev-dependency are included

Complexity Index: S | XS

As a Developer,
I want to have a Data File with all saved entries,
to simulate a database and have information stored somewhere locally.

AC:

• Data gets saved in Zustand and as a local JSON file when json server is running

https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions

• Use fancy svg logo animation upon start
• Carousel

FramerX und Framer motion verwenden
https://framer.com/projects/Get-Started--qdNYZR2TqLUsxM8BjsPT-Lq1au?tutorial=vOVBtmDtJzA
https://github.com/vercel/next.js/tree/canary/examples/with-framer-motion