Where is the admin dashboard?

[bojtalepenye]

Where can I access the admin dashboard. I want to be able to modify questions and answers and courses. If I go to localhost:3000/admin It just redirects me to the home page where the "Continue learning" button is

Thanks,

[sanidhyy]

Hi @bojtalepenye,

Make sure you're logged in with the same ID that's been added to CLERK_ADMIN_IDS, which you can set through the Clerk dashboard. Also, double-check that there are no spaces in the ID when you add it. Once this is set up correctly, you should be able to access the admin dashboard at /admin.

Let me know if you need further assistance!

[bojtalepenye]

I mean, I can edit the page.tsxfile in the app/admin so that it won't redirect me to the home page. If I do that, I get to the admin dashboard, but it says unauthorized and I cannot edit anything. So, how do I log in as an admin? I have to modify an exiszing user's permission, right? But on Clerk, I can only view a user's info, change their password and modify other information. I don't see anything related to Administrative permissions. Correct me if I am wrong, but exactly, where do I set the account as an Admin, so it can access the Admin panel?

[bojtalepenye]

I have set the user id with CLERK_ADMIN_IDS=, I have even set the default roles a user first gets is Admin permissions, but I still get redirected to the home page.

[sanidhyy]

Hi @bojtalepenye,

No, there isn’t any specific setting for admin permissions in the Clerk dashboard. You just need to copy the user ID from the Clerk dashboard and paste it into your .env.local file under CLERK_ADMIN_IDS=, and it should work as expected.

If you're still running into issues, feel free to contact me at my email so we can go over the specifics.

Best,
Sanidhya

[JimiResponso]

Good Day, I also have the same problem, the first thing I did was npm run build, but it won't let me since the user ID on the header was not used, so I deleted it, after that, it let me build, but now I'm on the same problem with bojtalepenye.

[bojtalepenye]

@JimiResponso Okay, I got it working. You really cannot set a user as an Admin on Clerk, so what you do, is copy their user id. You won't have a user right away, so log into the app with your Google Account for example. The user will be created on Clerk. Once you have got a user, input this value: CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxx" into your .env or .env.local file. I have created both, just in case. That's it. You should be able to access the /admin dashboard

One more question @sanidhyy . The app is super awesome. Would it be possible to implement two more type of questions and a neat little feature? The first one could be the fill in the gap. You have a question, an example sentence, and part of it is missing, and you have to type it in. The other type users may love is the write the whole sentence out question. And lastly, in the Admin panel, and inside the Challenge Options menu bar, could the answers be organized into groups according to which question they are assigned to? Therefore, if I open the Challenge Options, I am not greeted with hundreds of answers, and I won't lose my head in the process😅.

How difficult are these to implement? Again, a thousand thanks for this app already. Self hosting it is just great, and this is the closest someone can get to an open source Duolingo language learning app!👍👌

[sanidhyy]

@JimiResponso Okay, I got it working. You really cannot set a user as an Admin on Clerk, so what you do, is copy their user id. You won't have a user right away, so log into the app with your Google Account for example. The user will be created on Clerk. Once you have got a user, input this value: CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxx" into your .env or .env.local file. I have created both, just in case. That's it. You should be able to access the /admin dashboard

One more question @sanidhyy . The app is super awesome. Would it be possible to implement two more type of questions and a neat little feature? The first one could be the fill in the gap. You have a question, an example sentence, and part of it is missing, and you have to type it in. The other type users may love is the write the whole sentence out question. And lastly, in the Admin panel, and inside the Challenge Options menu bar, could the answers be organized into groups according to which question they are assigned to? Therefore, if I open the Challenge Options, I am not greeted with hundreds of answers, and I won't lose my head in the process😅.

How difficult are these to implement? Again, a thousand thanks for this app already. Self hosting it is just great, and this is the closest someone can get to an open source Duolingo language learning app!👍👌

@bojtalepenye Glad it's working!

Yes, it's definitely possible to add as many question types as you like! We have a separate entity in the database for question types, and right now, I've only implemented SELECT and ASSIST types. You can extend this to include the question types you're interested in, like FILL_IN_THE_GAP and WHOLE_SENTENCES.

duolingo-clone/db/schema.ts

Line 64 in 336b84a

export const challengesEnum = pgEnum("type", ["SELECT", "ASSIST"]);

I know it can get a bit overwhelming when you have hundreds of challenges and challenge options to manage. A good solution could be to use react-admin Tabbed Show Layout from react-admin to group the challenge options based on their assigned challenges and Filtering to easily search challenges. This would make it much easier to navigate.

Implementing these features isn't too difficult but would take some time, which is something I'm a bit short on at the moment. That's why they haven't been added yet. I'm glad you're enjoying the app, and self-hosting it is a fantastic way to get the most out of it!