Making a payment will be so sexy...

This has always been a dream of mine. Run my own company, an Edu-Tech Platform and be my own boss.
Join me as I share every step of the way with you, the ups and the downs, of this amazing tech journey. Come along and learn with me and code with me. This series is all about me building a Startup from scratch, solo.
INQUIRIES AND COLLABORATIONS ► [e-mail]
Developer Resume Template ➡ shop.developerfilip.com ✏️📋
Join my Newsletter ➡ shop.developerfilip.com/sign-up 🔥
Join my Discord Server ► / discord
Follow me on Twitter ► / developerfilip
Follow me on Instagram ► / developerfilip
Check me out on GitHub ► github.com/FilipGrebowski
Chapters for easy navigation:
0:00 intro
0:22 the reality of a startup
1:23 don’t miss my uploads!
1:43 addressing client-side emails
2:27 a security vulnerability (IMPORTANT)
3:19 what could happen (WORST CASE)?
3:45 a SOLUTION to the PROBLEM
4:28 TailwindCSS vs. SCSS
5:06 what sold TailwindCSS for me
7:10 everything is now responsive!
8:08 noSQL vs Relational DB (PLEASE HELP!)
8:50 Authentication is complete (DEMO)
10:40 NextAuth as my Auth Library
11:15 generic Input component changes (Being DUMB)
11:58 your VOTE on what’s next
12:12 SUPER SEXY Payment Details Collection
12:44 quick tangent to Username Validation
13:20 BACK TO SEXY PAYMENT UI
15:22 lets talk code (Payments)
16:50 is the payment card responsive?
17:45 speed-SHOWCASE + summary
MUSIC BY ► @epidemicsound
#EduPlatform #startup #developer

[@hemanthkotagiri8865]

That card animation is hands down, the best one I've seen so far anywhere in payment auth pages.

[@developerfilip]

Wow! Thanks for that! - and it’s all Stripe components, contained in a form! 😄 Just very custom ☺️

[@developerfilip]

Make sure to leave suggestions/improvements below and SMASH the like button! ;-)

[@thongbanguyen5716]

Hi Filip, regarding the database, I think it depends on the data structure that you want to store. With MongoDB, since it’s a schema-free db, it provides you a lot of flexibility to store data. It’s great to use MongoDB when you need to do a lot of query with your db. However, MongoDB is not as secure as other SQL dbs like PostgreSQL. If you care about consistency, security, and scalability in terms of transactions or queries, and you can create a relationship between different objects that you want to store in your db. PostgreSQL is the one to take. Anyway, it’s up to you to choose which db that you feel more comfortable to work with. Great works on the UI man. Keep going!

[@developerfilip]

I've worked with PostgreSQL before, I was actually considering using it. I'm familiar with building database models, I'm just scared with the concept that it has be planned beforehand - and the way the app works should be known - but I'm still unsure. I need to give this a little bit more thought, but I definitely want consistency and scalability to be a key factor here. Thanks so much for the advice!!

[@thongbanguyen5716]

@@developerfilip I see where’re you going. Another problem with MongoDB is that it gets very painful as your db gets bigger, especially for writes. I’ve read somewhere about a company migrating from MongoDB to Cassandra to achieve better scalability. I’ve never worked with Cassandra myself, but I think you could consider it for your backend.

[@k2n3l]

Hey man, I'm always excited to see how people build their dreams software. Quick notes. 1. The login screen where you show an error message for when the email entered is already in use is classic case of over enginnering. You could've just had a email form for both login/sign up together. If the email is in the db, ask for password and if the email is a new one, ask user to create a password. 2. I love how awesome you're making the experience but I still think you could be working on parts that differentiate your site from others more than those parts which every site has like the auth pages and payment pages. I'd love to see how you build the actual amazing learning experience you wish to build. That'll also give you an mvp to start getting test users for.

[@developerfilip]

Hey!! Thanks for watching! So for the account creation, I know it could have been much simpler, and I guess you could call it over-engineering, but like you mentioned below, I am definitely trying to differentiate this site from others. This whole experience will continue thought the whole application, I will make sure to make every bit of this platform as special as possible :D I'm just making baby steps now, but the vision is there, I want to get the basics right first and nail them, and then I'll move onto the real fancy stuff!

[@krishcshah]

13:05 username definitely should be live! It's a different pain when you see your favourite username is already taken after fully typing it in. 😂

[@developerfilip]

So true... will do that ! :D

[@selmitech]

I love TailwindCSS and for the lengthy inline classes, I use vscode and I installed the 'Inline fold' extension. It simply fold these lines, and you can inform it by clicking on it.

[@noahbosman6227]

Wow the payment card details is so amazing! Keep on coding and im curious to see how this project develops

[@yjawhar]

The risk is high because after the @, the server returns all matching emails by json, so the attacker can just gather those. Your service could be a method to just collect emails.

[@sriram_cyber5696]

Looks Amazing!!

[@JlHAD]

change the card color to something like a glass material it is much better and its also friendly for the eye in my opinion

[@developerfilip]

Offt, that could be sexy too... ;) Will give it a go!

[@aarushkumar168]

Was waiting for this 🤩❤️✨

[@AdrianTwarog]

You need more full time jobs!

[@developerfilip]

I’m sure you can relate 🤪🤪🤪

[@mdfayyu786]

How about you both(Adrian and Filip) collaborate and bring up a CSS series that makes CSS Life easy for us... 😊

[@AdrianTwarog]

@@developerfilip I only have 4 full time jobs!

[@Wittgenstein.]

Hey Filip! Since I have some some experience in angel investing for startups with decent exists I just want to tell you few things, that can be helpful. 1. Competition is for losers When you're entering such competetive market don't focus on UI, focus on your unique value proposition. Can your users do something essential they couldn't done before? Can they do something 10x faster, 10x less expensive, 10x better? What is the process you're going to change radically? Why has no one done this before? I think that in Edu-Tech there are generally 2 segments of customers: I-won't-pay-you type, which is generally learning from youtube, google and blogs, since nobody likes to change to new enviroments [trust, lack of content, need to learn new UI etc.] His best day in his life was when he discovered what adblock does. Internet bookworm, which has a lot of money, is treating learning as an investment and doesn't care about paying few bucks for exclusive content/courses. 2. Some ideas are better for small-business, not for startups. A real startup is a company that creates something 10X, magical solution that customers can't get anywhere else. 'Unicorn' term should be seen as in customers-with-problem eyes, not in investors who love buzzwords. There are millions of restaurants, but there are only few big companies like mcdonalds. A fake startup is a small business, that is struggling to take over 5% of their first sub-market selling the same shit in the same way that have been sold for yers at slightly better prices $50 -> $40, $10 -> freemium or with slightly better UI, UX or different non-essential functions. These businesses still can growth to 6-7 number income, but that's usually the ceiling. If you're determined to make 6-7 figures with this idea, you'll probably achieve it after few years. Especially when you'll focus on youtube marketing, since from what I can see- it's your passion. I hope this can help you, keep up your good work! :)

[@developerfilip]

First of all, thanks for taking your time to help me out. I really appreciate this. You have given me some things to really think about and look into when driving this forward. I will probably read it a few more times to make sure I’ve engulfed all the great tips and try to apply them. Thank you!!

[@ifbasit]

You are doing so well so far. I am really excited to see how do you end up with this startup. I do have some suggestions: 1. You are implementing different logics for validation for your forms. It should have one logic & UX for validation throughout the website. 2. The Payment Card UI is so fascinating, but tbh it's not User-Friendly. You may use Stripe default card UI; people have already seen Stripe default Card UI on many platforms they are much familiar with. 3. Try to add right border to the labels in inputs, Currently when its onblur. It looks like Labels are actually the text written in the inputs

[@muhawenimanajanvier6280]

8:08 I think this depends on what you plan to implement or the features you're planning to add in the future. Sometimes I use both relational and non-relational in the same project.

[@morveman_yt9567]

Sooo gooood !! Well I think it hard to understand what you have to do with the card at first, but I LOVE the animation so much !!

[@developerfilip]

Thank you!! Looking at the awesome feedback so far, I will definitely make improvements to the UX of the card to make it clear as per what is going on! I have some ideas :D

[@krishcshah]

While rate limiting make sure to keep in mind some people have long emails and they'll require more requests than others.

[@developerfilip]

Yup, it will be set to a larger amount of tries, a timely fashion, or I might just make it like the username input, that verifies on submission, which would allow the user to enter the whole email before trying (which I think would be best) 😜

[@krystianjonca814]

Would be sick if you could show us a little bit more code👍 I would also like to see a video in which you go over the tech stack that you used, and your opinions about it :) btw the animation is fire 🔥

[@yongnaiigamhan]

The Ui is pretty good filip, You should add rounded ui for users and dark mode/white mode I suggest also add a Login with google, The card needs a bit of filtering like validating a real car not fake cards to stop scams

[@developerfilip]

Dark/light mode to come! Also I will provide two more providers for logging in, Google and GitHub :)

[@yongnaiigamhan]

@@developerfilip ahh good to hear that filip

[@yongnaiigamhan]

@@developerfilip Also Add filter that sends data as text not html element to make sure no XSS will happen

[@enigmasaftercoffee2604]

Great series! I too am working on a SaaS app and am following along as I do. I wanted to comment on your database question: there is a third option. in my current app, I am using RDBMS, but with only one table for accounts and app state stored in a max-length string. Granted it's unusual but with good app-state management in place, it greatly simplifies my app, I have the benefits of indexing and throughput that come with a good RDBMS, and it still behaves like NoSQL.

[@carloseustaquio7785]

Yeah, I like the card registration. Just maybe that would be cool to have some tips there advising users to click in the card so they can insert the text

[@developerfilip]

Totally!! That's something I haven't implemented yet. There will be instructions, and I'll add points of focus to make sure the user knows what to do! Thanks for the feedback!!

[@carloseustaquio7785]

@@developerfilip nice!

[@szdavid21]

You could use tailwind within your SCSS with the @apply keyword so you won't have so many classes in the JSX files.

[@paulkouadio7623]

Yep. Test it out inline, and when you're satisfied with the end result just place the style in SCSS with @apply. Works like a treat

[@mageshyt2550]

this is sick mam hats off to you 🙂

[@keshav1598]

For mobile screen I think you can flip the card and show the CVC field

[@developerfilip]

Oh I love this!!!

[@John-mj1kk]

You can do it like most other websites where if you've input your email/password incorrectly 3-5 times, it requires you to do a captcha for the rest of your tries. If, however, the tries exceed the limit, then the user will be restricted from trying again for a specified amount of time.

[@developerfilip]

That is exactly what I am planning to do! Thanks for the advice!!

[@farhanutk]

I think the current implementation might make the user think that it’s just a picture of a card. Maybe adding a border or background color to distinguish the input fields could help. It will be less confusing for the user.

[@developerfilip]

Maybe a flashing border and a message letting them know to fill out the card?

[@farhanutk]

@@developerfilip Better 🙌

[@tannerwilson4670]

The card color is too harsh and I don't think it would be immediately apparent that you can enter info into the card fields. Maybe a subtle border around the fields?

[@developerfilip]

Yes, I agree with that, I need to maker it somewhat clear that the card has to be filled out :D

[@baibhavanandjha]

Hey Filip, I hope you're doing well. I noticed here you said that you'll be using an IP-based rate limiting. I am a security researcher and please keep in that there is this attack that can be easily performed after getting a free AWS instance. It's called IP rotating which will easily bypass IP-based rate limiting. Also, about password brute force, it's okay to have a week rate-limiting system in terms of security as it will be virtually impossible (it will take way too much time making this attack impractical) if the password is more that 5 characters with AlphaNumeric combination. However, use a good rate limiting technique that doesn't rely on IP for the OTP (if you decide to use OTP)

[@developerfilip]

Hey! Thanks for this awesome advice. I've actually started reading up on different rate limiting techniques. Is there one in particular that you would suggest for my use cases? I'm planning to rate limit my login, and after a few tries introduce a reCAPTCHA, I decided it would be fine as it would only show after many quests are sent, I been made aware there is also an invisible reCAPTCHA that analyses user activity. Would you suggest I rate-limit each one of my API endpoints? I mean, it seems logical to secure every API endpoint from being taken advantage of. What do you think?

[@brunoharari6454]

That card screen should have three buttons, retrun, skip, and save, or if you fill in the card info should change text of the button to continue, that would be better As always really good content!

[@mdfayyu786]

Again an Amazing video to showcase. The card animation is awesome. I guess going with MongoDB would be a better choice and it's just my opinion 😊.

[@developerfilip]

Thanks for the kind words and feedback!

[@rakaa31]

on mobile you can make that card small after completely filled and then add the same animation as laptop

[@freecoder522]

You are amazing as a developer and you can be a good voice artist for BATMAN ............

[@5pecialcharacter]

For the CSS classes, why not just add some carriage returns between them? Or does this break next.js?

[@frederikbrandt4645]

Sooo nice a series! I really hope you'll keep on making these even though you have a full-time job and a girlfriend haha. I will atleast love to see them. So inspiring!

[@layburn4536]

Hello Filip, I was wondering is there a documentation you follow so as to do login and registration with mongo db and next js?

[@developerfilip]

I use the official nextjs docs for the nextjs implementation, mongo db stuff is just a query that sends and receives data. I’ve just added it as part of the process 😝

[@wolfVFXmc]

Rate limiting can be bypassed via proxies, I would recommend doing rate limiting and recaptcha V3 (the user doesn't notice it)

[@developerfilip]

Great shout! But can proxies be automated to change every few seconds? Hmm.. yeah actually I guess they can. Can you clarify what you mean by the user does not notice it? I’m unaware of how reCAPTCHA V3 works 😜

[@wolfVFXmc]

@@developerfilip yeah there are certain providers that offer proxies that change every request, about recaptcha V3 the user never has to do the I'm not a robot thingy recaptcha gives the user a score how likely they are a bot

[@developerfilip]

@@wolfVFXmc fantastic! Thanks for clarifying! I’ll implement both in that case 🙌

[@weaslie]

At 17:55 you have different error messages for "user not found" and "invalid username or password". But this way someone can still bruteforce account names by checking the error message :) So make sure you use the same message when the user is not found or when the password is incorrect. Also I'm curious, GSAP requires you to buy their license when users have to pay on your website to use your website. Did you buy their license or do you think it's not necessary in your case?

[@developerfilip]

Great spot! Yes - I know I've introduced the error messages like that, I do need to change that, it was actually just to check if I meet all the conditions, but like you suggested, only one message will show! Great questions about the GSAP License - On their website it states "Our paid license is only necessary in projects that you sell to multiple end users". As this is a one of website, that does not require a user to pay to use it (it's only the courses that will be paid), I don't think this would apply to me. I will however double make sure with GSAP Customer Support before launching the courses. :D

[@weaslie]

@@developerfilip Thanks for your reponse! I'm having the same kind of issue with GSAP right now, because I'm building a website which partly requires users to pay (to unlock extra content). It has kind of the same use case as your website does, but as far as I understand I should buy the license since multiple costumers can pay on my site. So yeah.. Let us know when you find out :) Furthermore, keep up the good work! It's really nice to see you build up something from scratch like this :D Thanks for sharing it! Btw, the creditcard animation is sexy, as you said :) Only thing is that it's maybe not clear for all users that it contains input fields (like the CVC field). So maybe add some borders or something to make it more clear that those fields are input fields

[@LeandroSimoesArt]

The video is amazing. Adding a 2FA system would be nice too.

[@developerfilip]

Thank you! 2FA is 100% something I will consider and definitely add later! ;)

[@arpitrathi1334]

I see 2 problems in the card UI 1.) What about names which are longer than the space in the UI 2.) Clicking and getting the CVC field might leave some non-technical users wondering where to fill the CVC field.

[@scriptDoodle]

would love to see that card built with html,css & gsap

[@elamandeep]

Hey fillip ! what's tech stack you are using in your startup??

[@developerfilip]

Next.js (Full stack React Framework), TailwindCSS, MongoDB (for now)

[@BraydenLangley]

You should support micro payments with bsv... :D

[@uptourgames3735]

Can you talk about your gears? I'm looking to the same kinda video for my startup but I've been stuck on the gears to buy (Camera, Mic etc)

[@developerfilip]

My latest video has links in the description of my main gear!

[@uptourgames3735]

@@developerfilip Seen it!

[@_brillz]

I wanted to suggest you add an email authentication feature to make sure the user inputs a valid email

[@developerfilip]

It’s there!! 😜

[@arsen3223]

you can make the input validation live until it hits a rate limit, and then you just do it on submit. Very few people would notice

[@developerfilip]

That is a good option! Thanks!

[@bhadrakal]

I really want to know how you made the password section and I have a design for the card if you want to se it but every thing is amazing btw 🔥🔥

[@developerfilip]

I'll discuss it in the next video and show the code! Also - I do want to see!! Email me!

[@bhadrakal]

@@developerfilip okay i have send you the codes , thanks btw for considering it😁😁

[@blaizeW]

I'm a bit late, but - you shouldn't ask for CCV when you are adding the card on login. The CCV should be asked every time someone made a purchase. Also, your data should be encrypted.

[@developerfilip]

Hey! Everything is done via stripe, so all that data is being encrypted the way it should for max security. The CVV is required to add card details within stripe, and then whenever a purchase is made, the user has to provide the CVV again for security. Hope that answers some questions!

[@rajenderkatkuri7642]

brahhh waiting for the new video....😅😅

[@abdu5822]

I suggest When User starts entering Card Information, you should change Skip Button Text to Submit

[@developerfilip]

You are correct. I haven't actually touched the buttons, they need to conditionally change based on what's happening. Update on this will come in the next video!

[@abdu5822]

@@developerfilip awesome man

[@TheoParis]

Nice video! A solution to the long tailwind classes list would be to enable word wrapping in VSCode.

[@just_A_doctor]

From my perspective I think relational db are the best suitable for ur project Why let redesign ur system U hv teachers students and admin maybe Teacher should have id , course number , name Student should hv name , id , boughted courses Ok obviously the PK( primary key for both is id (BCS it is not repeated name can be repeated. So we made the infra database design now if we go with nosql we can store them as obj but to relate them like how we could now the number of students with this teacher it will be hard because we need to recreate a new obj for this one metadata . But with SQL it will be easy because we can creat relationship btw student and teacher Teacher table id name courseNum Student table id name courseBght With simple query we can creat new table to the courseNum that had all the students IDs and the teach id Without using obj because on the future the no SQL it is gonna be so expensive for u if ur indexing all this data from an obj

[@sabinbaniya]

Yup, that's a really good animation for the payment. However i do think that people who have no clue for this video will need some guidance to input their card information on that card, cause it kinda looks like an image and it might confuse users.

[@developerfilip]

Maybe a bit of text to let them know to fill out the card? Or a flashing border?

[@sabinbaniya]

@@developerfilip yeah anything that would let them know that you can fill out those would do a good UX and make it clear .

[@fayxos]

When filling in the card information on mobile you won't see the card because of the virtual keyboard

[@developerfilip]

This is a fantastic catch and something I totally forgot about. Uggh so many things to remember and consider!! I will see how I can make both work together well. Thanks!!

[@MMEDHAT1910]

Hey Filip! , you can use scss or css with tailwind, for example you can have a class called auth-container and in scss apply tailwind styles to auth-container class using the @apply keyword, which will reduce the cluttering inline styling of tailwind. Also, the series is amazing good luck with your job and startup :)

[@developerfilip]

I knew I could make both Tailwind and SCSS work together, but I didn't realise I could write the same classes in another file - as in the actual physical classes provided by tailwind. Is that what you mean? Or are you referring to writing custom SCSS and then using it as an inline class? EDIT: Just looked it up, I see what you mean. That's awesome, will definitely de-clutter code with this :D Thanks for the feedback and help!!

[@sharjeelsherkhan]

discord gang here in seconds ✊🏻

[@stijnvanleeuwen3647]

You should create a button on the 404 page which directs you to the home page

[@developerfilip]

Or maybe an automated redirect and randomly populated gifs that say “oh no!”? 😜

[@stijnvanleeuwen3647]

@@developerfilip Hahaha even better!

[@lakshya5946]

@@developerfilip That's what I do 😂

[@Skidam]

Are you from Poland or something?

[@developerfilip]

I am Polish yes ;)

[@elzbietagrebowska6089]

💻💻❤🙏🏼

[@mharding7]

AMEX uses a different card number format. It's not a 4x4 format. Just FIY

[@developerfilip]

Yup! Stripe handles that 😜

[@gofullstack]

You don't sound like a database person and you definitely would not want to write those complex queries, so NoSQL should do just fine. But one thing you need to know is that when it get to the point where you need to make multi document transaction you'll use more resources (disk and maybe CPU) compared to if you had gone with a RDBMS.

[@developerfilip]

Actually I'm familiar with SQL and building database models, but I am not familiar with the best practices and rules one should undertake to make a scalable DB system. It's a bit of a blank for me. I've worked with PostgreSQL before, so it's an option I will explore, but I still need to give this more thought! Thanks for the great advice!

[@ericgoerens425]

I understand what you mean and that you want to keep that mechanism with the email. However I don‘t want other people to know my email address, it‘s a brilliant idea really but you are technically exposing your users email addresses, even with a rate limit or a captcha. Personally I would stick to the old fashioned „is this email taken“ - request. You have to show the user that something is happening in the background, this results in a great UX even with a request delay

[@georgekrax]

I believe PostgreSQL is far better, especially for your use case

[@rajenderkatkuri7642]

waiting for your new video.... come on man upload.😢

[@epicmalayalam.7008]

I am just a student when I start my projects and learning you should help me and collab with me

[@SoyDalon]

Come one, been a boyfriend is time! Is like a job, I’m you 😂

[@welltbeats]

I know that you just want to show your progress but since I guess a lot of people want do similar things it would be a good reminder to use established software and work with their documentations. You are showing so many dangerous practices that it probably won‘t be a secure and accessible platform. I don‘t want to attack you :) but let security researchers provide you with security related stuff (e.g. handling credit cards) and don‘t reinvent the wheel with a fancy half way through email validation where you would have to do some low-level crypto, and let people who know about usability and psychology help you with the ui (e.g. libraries or guidelines, e.g. for accessibility), your password input is nice but I‘m pretty sure it will create a bias towards certain symbols and characters compared to more established variants

[@vedantnn7]

I think if you hate tailwind, you may try something like chakra-ui. P.S I really love chakra-ui and does a lot better job than tailwind.

[@developerfilip]

I like tailwind a lot, I hate how it's inline, but I've already got a great solution from a comment above how to solve the ugly code :D

[@aarushkumar168]

Firstt

[@avivshvitzky2459]

You have a girlfriend? how in hell do you have any time left

[@developerfilip]

I do - and I don't have time left lol - that is the problem! :D

[@user-pd4yi1ii2e]

Play clash royale ????

[@welltbeats]

I know that you just want to show your progress but since I guess a lot of people want do similar things it would be a good reminder to use established software and work with their documentations. You are showing so many dangerous practices that it probably won‘t be a secure and accessible platform. I don‘t want to attack you :) but let security researchers provide you with security related stuff (e.g. handling credit cards) and don‘t reinvent the wheel with a fancy half way through email validation where you would have to do some low-level crypto, and let people who know about usability and psychology help you with the ui (e.g. libraries or guidelines, e.g. for accessibility), your password input is nice but I‘m pretty sure it will create a bias toward certain symbols and characters compared to more established variants