School radio app
Unanswered
Wood Stork posted this in #help-forum
Wood StorkOP
So I'm making School radio app, I've already made frontend and now I need some advices with backend
https://radiowezel-next-smoky.vercel.app/dev/changelog
https://radiowezel-next-smoky.vercel.app/dev/changelog
102 Replies
Wood StorkOP
@Anay-208 | Ping in replies
So I want to have full code in one language so I don't need external languages like python etc.
I've already written my backend in express.js tho, but I need to recode the whole backend functionality
And I'm wondering about recode to next.js
So if you prefer that your backend & frontend to be separated, like there are some people who prefer it and then create a backend in framework like nest.
The advantage of using nextjs to integrate backend is server actions, which can be used for mutations and provide type safety: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
The advantage of using nextjs to integrate backend is server actions, which can be used for mutations and provide type safety: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
Wood StorkOP
I prefer them to be in the same place
Also that's my first week using next.js
And I messed up and everywhere to fetch data from backend I've made like
"use client";
import React, {
useEffect,
useState,
useCallback,
useRef,You got your answer then I guess. You should build it in nextjs app, unless you need some other extra features
@Wood Stork And I messed up and everywhere to fetch data from backend I've made like
"use client";
import React, {
useEffect,
useState,
useCallback,
useRef,
You can just fetch on a server component and pass to client component
Wood StorkOP
And now all my pages are client so they cannot be cached
I recommend you to first learn nextjs from https://nextjs.org/learn
Wood StorkOP
Also my last question
It is better to use http cookie or local storage for like login auth
@Wood Stork Also my last question
Sloth bear
Http cookie is prefer for security.
Local storage is more vulnerable to XSS attacks.
@Sloth bear Local storage is more vulnerable to XSS attacks.
Wood StorkOP
It's vulnerable for website or for users only?
@Wood Stork So no express.js?
You can use it if you want separate.
@Anay-208 | Ping in replies You can use it if you want separate.
Wood StorkOP
I'm using it in my next.js directory rn tho
@Wood Stork I'm using it in my next.js directory rn tho
How are you using express in nextjs directory
Wood StorkOP
I've edited package.json and added tsconfig.server.json
Sloth bear
It’s mainly risky for users since hackers can steal tokens with XSS and take over accounts. But if a bunch of users get hit, the website could be in trouble too.
That’s why cookies (especially httpOnly ones) are the safer way to go for auth! Gotta keep those logins locked down.
That’s why cookies (especially httpOnly ones) are the safer way to go for auth! Gotta keep those logins locked down.
@Wood Stork I've edited package.json and added tsconfig.server.json
In unsure how you got it to work, unless you are running in a different server
@Sloth bear It’s mainly risky for users since hackers can steal tokens with XSS and take over accounts. But if a bunch of users get hit, the website could be in trouble too.
That’s why cookies (especially httpOnly ones) are the safer way to go for auth! Gotta keep those logins locked down.
Wood StorkOP
But do you really think someone steal token for a school radio app
School counts like 3000 people btw
School counts like 3000 people btw
@Anay-208 | Ping in replies In unsure how you got it to work, unless you are running in a different server
Wood StorkOP
I run both in one
Like wait
Actually rn I'm running it on localhost
But in one cmd
"scripts": {
"dev:frontend": "cd frontend && next dev --turbopack",
"dev:backend": "nodemon --watch backend --exec \"ts-node -P backend/tsconfig.server.json\" backend/server.ts",
"dev": "concurrently \"npm run dev:frontend\" \"npm run dev:backend\"",I do it like this
Like I don't really like running both of these separately
They're two different ports tho
@Wood Stork But do you really think someone steal token for a school radio app
School counts like 3000 people btw
It is like: “Why should I configure security for my app if there is no reason for anyone to attempt to hack it”
I recommend you to use a managed auth platform like Clerk
Wood StorkOP
I can't tho
It needs to be custom
Because there will be something to check if user is from school
@Wood Stork Exactly
… you didn’t get my point. It means you should configure regardless
@Wood Stork Because there will be something to check if user is from school
Wood StorkOP
Like every user will receive unique code or something
@Wood Stork Because there will be something to check if user is from school
You can check it easily on clerk
Wood StorkOP
To register
@Wood Stork To register
You can restrict registrations and invite them to register via email once they put unique code
@Anay-208 | Ping in replies You can restrict registrations and invite them to register via email once they put unique code
Wood StorkOP
Yes that's a good approach tho
Restrict registrations on clerk whichll only allow backend api to create users
10000 MAU are free.
Wood StorkOP
Wdym by mau
And how about smp tho
@Anay-208 | Ping in replies … you didn’t get my point. It means you should configure regardless
Wood StorkOP
I want to do password encryption and use http cookie only anyway
Like for now I was ending my backend
But I need recode anyway
Because I used both local storage and httpcookie
Original message was deleted
Wood StorkOP
It's for School tho, sorry
Original message was deleted
Wood StorkOP
But yeah when I will try to do something new and will need extra dev I'll write u np
-
Btw the page first was written in pure php and js lmao
And I was like it's time to learn something new
And I started to make it with next.js
And nextjs with tailwind are awesome
@Wood Stork Wdym by mau
Monthly Active Users
Wood StorkOP
Ohh
Wood StorkOP
Simple mail protocol
To sending like codes and links to email
@Wood Stork Simple mail protocol
Clerk manages Login & Register emails by itself
@Wood Stork To sending like codes and links to email
and if you're not using clerk, you can use apps like resend, AWS Ses, Zoho ZeptoMail, Sendgrid
@Anay-208 | Ping in replies Clerk manages Login & Register emails by itself
Wood StorkOP
that would be great!
I think I will use clerk
Alright
Wood StorkOP
So use next.js frontend and backend and clerk?
I was trying to make a gapples crossfade audio player tho, in backend even in frontend but I think that might not be possible on browser
@Wood Stork I was trying to make a gapples crossfade audio player tho, in backend even in frontend but I think that might not be possible on browser
Audio player needs to be built in front end only
@Anay-208 | Ping in replies Yes
Wood StorkOP
Okay so I'll get rid of express.js
@Anay-208 | Ping in replies Audio player needs to be built in front end only
Wood StorkOP
It is really not possible to make working gapples crossfade audio player like in Spotify
It needs to be an desktop or mobile app then
So I'm making a normal player
I've tried to stream audio to frontend from backend with like ffmpeg
But this not solved my issue tho
Sloth bear
For the best experience, a desktop or mobile app would be the way to go. Native apps give you more control over audio processing.
@Wood Stork I've tried to stream audio to frontend from backend with like ffmpeg
If you’re using ffmpeg, it’s the best to use a separate backend app
I was trying to do something with it but I leaving this idea
like nest
@Sloth bear For the best experience, a desktop or mobile app would be the way to go. Native apps give you more control over audio processing.
Wood StorkOP
I don't want to go into it so much as to make just one player for the radio station
I just quit this idea with gapless crossfade
Sloth bear
You can always revisit the gapless crossfade feature later if you decide to expand the app. For now, focus on keeping it smooth and simple.
It’ll be a little complex
Wood StorkOP
I've tried this
I've tried even external js libraries like gapless5 and some other libraries
I've tried even external js libraries like gapless5 and some other libraries
The audio was playing over and over again
And I did a research and it's really hard to make a gapples crossfade audio player in browser
Like even Spotify don't have it
Wood StorkOP
Hey @Anay-208 | Ping in replies I have problem
i've used clerk as you said
but clerk on the backend is returning to me
but I'm using clerk middleware
Context creation failed: Clerk: getAuth() was called but Clerk can't detect usage of clerkMiddleware(). Please ensure the following: - clerkMiddleware() is used in your Next.js Middleware. - Your Middleware matcher is configured to match this route or page. - If you are using the src directory, make sure the Middleware file is inside of it. For more details, see https://clerk.com/docs/quickstarts/nextjsbut I'm using clerk middleware