Welcome dear developers 👾
This is the repository for my capstone project "Wannado". It was part of my three months frontend-bootcamp @neuefische
IMPORTANT When checking the app in the browser, please watch it in dimensions of 375 x 667 px (iPhone SE). Right now, the app is NOT responsive
| Random View | Artist Page | Map Page | Upload Page |
|---|---|---|---|
 |
 |
 |
 |
- Users can browse random wannados, i.e. small tattoo-ideas. They can filter them by location, price etc.
- Users can visit the pages of the tattoo artist and see their time schedule for making an appointment
- Users can also see map with tattoo artists near them
- Tattoo artists can publish their time schedule, so making appointments is easy for both sides
- Tattoo artists can upload their sketches and tattoo-ideas, so users can browse them
| Framework | Libraries | Other |
|---|---|---|
| Next.js | React styled components next-cloudinary leaflet react-datepicker react-select |
TypeScript MongoDB mongoose cloudinary Geoapify API |
The App is structured in few different /pages
- /index.tsx renders, depending on state, three different views: The Random View , handled via Random View Component, the All Artists List and the Favorite Artists List, both handled via the List Component
- /map.tsx renders all components regarding the map feature (obviously...), i.e. Map.tsx and Selector.tsx
- /newuser.tsx is the form page. Here artists can upload their information, schedule and their work
- /[slug].tsx is the dynamic page: It renders the Artist the user is navigating. The slug ist the name of the artists without spaces and all lowercase. Its generated during artists creation and part of the artist object.
- The API-Routes are /api and /api/geodata. They handle the MongoDB requests and call the Geoapify.com API.
The data, i.e. the Artist-Objects, are stored in a MongoDB. Basis of the object is the ArtistClass.ts.
The uploaded imgs are stored at cloudinary. The value of artists.tattoos is an array with the public IDs of the uploaded pictures.
This is my first time using TypeScript. I typed component props in the beginning of every component file. The ArtistInterface (declared here) is imported in many places - its an extension of the ArtistClass
You are very welcome to comment on my usage of TypeScript and the general structure and codequality of my app! I am a beginner after all, so I really appreciate feedback! Please comment HERE
Have a wonderful day 🦄
Never don't give up
— a shitty tattoo