π Hello there
I'm Mateus and this is my development progress during the Refine + DEV Hackathon.
This post is going to be huge due the reference links and images. For the first time I'm going to try to give you (the reader) a close feeling to my progress and research. Hope you enjoy.
I'm going to try to keep these updated day by day but during busy weeks it won't be possible, if that happens I'll provide a summary with a date range during the events.
β¨ The project
Here is an overview of what I'm building and know so far.
- The app will be called Prompteer
- It will be a platform where you can share you creative AI prompts
- The app will be a fully fledged SaaS, with free and paid subscriptions
- The UI/UX will be the best among other prompt platforms
π₯ My recipe
- nextjs, because a great SaaS needs server side rendering
- typescript, to say safe from the javascript horrors
- next-auth, to make authentication with nextjs nice and easy
- prisma, to make databases best friends with frontend devs
- supabase, to store all the data consumed by the app
- refine, to easily handle and manage the app's CRUD operations
- material-ui, for a streamlined look and feel
π June 23rd to 25th
Initial design and general app ideas, brainstorming and design study phase. Using multiple references, I came up with a basic black and white and full of Lorem Ipsums figma file.
π References:
- https://youtu.be/23Y01_aVdzM
- https://www.landingfolio.com/
- https://www.figma.com/community/file/1153320445661469840/Sales-Dashboard-Design
- https://uigarage.net/dashboard-on-macos-by-make-com/
- https://youtu.be/HZuk6Wkx_Eg
π June 26th to 30th
Studying the refine framework and how to work with it, had a rollercoaster of emotions in this phase, frustration and excitement went side by side.
π References:
- https://refine.dev/docs/
- https://refine.dev/docs/tutorial/introduction/index/
- https://youtu.be/k4lHXIzCEkM
- https://youtu.be/eDcxcTSQJaA
- https://youtu.be/0MvxHT5a6aY
- https://refine.dev/?playground=true
π July 1st
I managed to do a proper auth setup using next-auth and Supabase. People can now sign in using GitHub or Discord and their data will be stored on the database. I chose OAuth because by default Iβm going to get a name and profile picture in most cases, this is good to populate my UI.
π References:
- https://supabase.com/docs/guides/api
- https://supabase.com/docs/guides/auth/managing-user-data
- https://github.com/supabase-community/create-t3-turbo/tree/main
- https://authjs.dev/reference/adapter/prisma
- https://refine.dev/docs/packages/documentation/routers/nextjs/#basic-usage
- https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider/#getidentity
- https://refine.dev/docs/examples/next-js/NextAuth-js/
π July 2nd
I integrated Stripe with my previous auth setup and database. People can now sign in to their accounts and go to the pricing page, pick a plan and go to the checkout page, pay and be redirected back to the app. Everything is in sync! I would not be able to do this whole process if it wasnβt for a wonderful DEV post linked down below.
π References:
- https://dev.to/ajones_codes/how-to-add-user-accounts-and-paid-subscriptions-to-your-nextjs-website-585e
- https://stripe.com/docs/payments/checkout
- https://pipedream.com/apps/stripe/actions/retrieve-price
- https://stripe.com/docs/products-prices/pricing-models#flat-rate
- https://stackoverflow.com/questions/65384818/error-when-migrating-models-to-database-prisma
- https://vercel.com/guides/getting-started-with-nextjs-typescript-stripe
- https://egghead.io/lessons/next-js-use-stripe-js-to-query-product-data-and-pre-render-with-next-js
- https://github.com/prisma/prisma/issues/6219
- https://nextjs.org/docs/pages/building-your-application/routing/api-routes
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
π July 3rd to 10th
I created the prompts table on the database and other supporting tables such as languages, because you will be able to write cool prompts in different languages, along side the languages table, a comments table and an ai models table were also created. A lot of relationships were built. Some redesign were made to the UI, now it looks cleaner and more intuitive. I also accepted that I won't be able to finish this project to its fully desired result and that's okay.
π References:
- https://www.reddit.com/r/Supabase/comments/10y8zvk/setting_the_default_value_for_an_id_column/
- https://github.com/supabase-community/create-t3-turbo/blob/main/packages/db/prisma/schema.prisma
- https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
- https://stackoverflow.com/questions/67551593/supabase-client-permission-denied-for-schema-public
- https://www.prisma.io/docs/concepts/components/prisma-schema/relationshttps://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
- https://www.prisma.io/docs/concepts/components/prisma-schema/names-in-underlying-database
- https://mui.com/material-ui/
- https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
- https://stackoverflow.com/questions/25972904/truncate-text-to-fit-in-3-lines-and-show-three-dots-in-end-in-html
- https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts
π July 11th to 15th
In this phase Iβm focusing on the major features such as creation and deletion of prompts, comments, the subscription of paid plans and the overall UX. At this point Iβm not worried about optimizing my code, itβs a mess but a functional mess, and hopefully my spaghetti code provides a good experience for anyone who tries to use the app. Iβm still fighting with the entire stack but I do have some fun at random moments. I thought it would never happen to me but I suffered with the horrors of dates in javascript.
Here is a summary of what is possible to do in the app at this point:
- View a nice home, pricing and about page
- Sign in with OAuth
- Purchase a paid subscription
- Publish and delete prompts
- Write and delete comments on prompts
π References:
- https://refine.dev/docs/api-reference/core/hooks/data/useOne/#basic-usage
- https://stackoverflow.com/questions/61815605/material-ui-grid-system-limit-2-items-per-row
- https://day.js.org/docs/en/installation/typescript
- https://day.js.org/docs/en/display/from-now
- https://mui.com/material-ui/react-text-field/
- https://refine.dev/docs/api-reference/core/hooks/data/useMany/#basic-usage
- https://www.crocoder.dev/blog/react-input-component-clear-value-after-input/
- https://stackoverflow.com/questions/55677600/typescript-how-to-pass-object-is-possibly-null-error
- https://bobbyhadz.com/blog/react-ref-returns-undefined-or-null
- https://stackoverflow.com/questions/59647940/how-can-i-use-ref-in-textfield
- https://day.js.org/docs/en/plugin/timezone
- https://date-fns.org/v2.30.0/docs/formatDistanceToNow
π July 16th
Iβm wrapping up the development for the final release, I had to eliminate a few features due to the time constraint but the whole app is working as expected, except for the search bar and some filters.
Today I pushed through some final touches on the front pages, stripped a few visual features away from the dashboard and polished some interactions, such as the paid subscription. I also created a seed script for the DB, now itβs easier to populate the app with some data.
π References:
- https://stripe.com/docs/api/checkout/sessions/object#checkout_session_object-line_items-data-price
- https://stackoverflow.com/questions/65165662/how-can-i-get-price-id-associated-with-a-charge-in-stripe
- https://github.com/refinedev/refine/blob/next/examples/blog-refine-supabase-auth/src/pages/Login.tsx
- https://next-auth.js.org/providers/credentials#example---username--password
- https://refine.dev/docs/examples/next-js/NextAuth-js/
- https://www.prisma.io/docs/guides/migrate/seed-database
- https://www.prisma.io/docs/concepts/components/prisma-client/crud#create
π July 17th to 18th
This is my last update, I've frozen the code updates and limited the changes only for small refactoring and some cleanup.
Top comments (5)
The project idea is excellent, and I also love your presentation style... you can surely win.
Thank you!
Hey @mateusabelli I have a quick question: Can we utilize API routes in Refine, similar to how we create APIs and directly access them in Next.js?
If possible can you link the doc
Hello @nityam0213 Yea, we use API routes without problems while using refine with NextJS. I've built some API routes for Next Auth and Stripe using this tutorial dev.to/ajones_codes/how-to-add-use... I also recommend taking a look at this doc showing how to work with refine using NextJS with pages or app directory refine.dev/docs/packages/documenta... I hope that helps!
That's super helpful.. Thanks man