Programming pokebrowse: Browse and Upload Pokémon Sets

[tofa]

Hey everyone! I'd like to present a project I've been working on, pokebrowse! It is a web application that allows users to browse and upload Pokémon sets using a combination of filters such as earliest upload date, species, lowest speed tier, typing, author and (in the future) more. It is hosted on https://www.pokebrow.se/.

Why?
Because I think it would be neat to have a database of user-defined sets, that anyone could query in order to find "all Excadrill sets released after Crown Tundra", "the highest rated sets in the last month" or "all sets for ground types that reach the speed tier 290".

Having a database to collect and query different sets from various users would be helpful to those who kind of know what they want, but don't know the exact set, and would like to search for it. Or if you just want to browse.

How does it work?
There are two services provided by pokebrowse: Browse and Upload.

Browse
Browsing is done by combining filters, which are typed in a text input field similar to PS chat (e.g "/speed 290", "/date 2021-12-20", "/author tofa"). When you have combined the filters of your choice, click Search to query the database for sets that satisfy the query. The results are then fetched and presented as panels, see the image above. Clicking on a panel opens a popup with an import and the full description, with the option to copy the set to a clipboard.

If you have an account, you can also browse sets that you have uploaded and have marked as private.

Upload
To upload, you must first create an account. Then, you can upload a set by specifying a name for the set, its import, as well as a description of it. You can also mark it as public or private; public sets can be browsed by other users.

 

[Wugus]

Really cool program you’ve made!

As someone who’s technologically-illiterate, could I get some help getting the program running? I downloaded PostgreSQL but I’m not sure how to get to the database where you run the SQL file. Any tips you have would be appreciated.

Have a happy New Year!

 

[tofa]

Really cool program you’ve made!

As someone who’s technologically-illiterate, could I get some help getting the program running? I downloaded PostgreSQL but I’m not sure how to get to the database where you run the SQL file. Any tips you have would be appreciated.

Have a happy New Year!

Thank you! I agree that its not trivial to set things up, especially the database! It might be a lot if you have not done anything like this before, I struggled with the database setup myself as well :) I'll outline the steps including stuff I didn't cover on the Github page. I'm not sure which operating system you are on but I'll try to give precise steps that work regardless of the operating system. I have created an HTTP version of the app that requires less configuration, and should work on all operating systems. This is the version I will link to in these instructions, so please use the links I provide here!

Here are the expanded instructions:

1. Install NodeJS. This will allow you to use the npm command in a terminal
2. Download the HTTP version of the codebase from Github, click the green Code button and then download as a zip
3. In the server/ directory of the codebase, run npm install to install dependencies for the server code
4. In the client/ directory of the codebase, run npm install to install dependencies for the client code

If everything is okay until this point, it should now be possible to run the servers and client, but you should get errors because we have not added the necessary configuration files and database setup. However these are the steps to run the application, repeat these after finishing steps 7-12, run each command in a separate terminal (do not close the terminal unless you want to close the application):
5. In server/, run npm run start to start the server and npm run startLogin to start the login server
6. In client/, run npm run build, then npm run serve to start the client on port 8080 (meaning you can access it through http://localhost:8080).

Now let's cover configuration! First, the database:
7. Install PostgreSQL. This guide should give you the necessary steps to start up PostgreSQL using the installer. Then, follow this guide (I recommend using option 2) to create a PostgreSQL server (you could call it pokebrowse). You'll have a default database in this PostgreSQL server called postgres after finishing the second guide.
8. Create a user for PostgreSQL. To create a user on your PostgreSQL server, right-click on pokebrowse in the pgAdmin browser, then choose Create > Login/Group Role.... Provide a name under General (for example, the name "pbUser"). Provide a password under Definition. Tick "Can Login?" under Privileges. Then save! This account will be used to access the database from the application.
9. Create a database for PostgreSQL. Right-click on pokebrowse again, and now choose Create > Database.... You can call the database whatever you like, for instance pbdb. Use the default user (not "pbUser") as the owner.
10. Create the tables using the provided SQL file. To do this, in the pgAdmin browser click on pokebrowse->Databases->pbdb->Schemas->public. Then, right-click on Tables in the pgAdmin browser, which should be visible after expanding the browser as described, and click Query Tool. It'll open up a tab in pgAdmin. In here, copy paste the CREATE TABLE commands, including semi-colons, in the SQL file I provided in my repository. Do not include the lines containing the DROP TABLE commands.
11. Allow "pbUser" to interact with the tables. To do this, again right-click on Tables in the pgAdmin browser, this time click Grant Wizard.... In here (in Object Selection), select all the created tables and click Next. Then, in Privilege Selection, click the +, choose "pbUser" as the Grantee, then tick the INSERT, SELECT, UPDATE and DELETE privileges. Click Next. Then, click Finish to add these privileges.

If everything went well, you should now have a configured database "pbdb" running on port 5432 with a user "pbUser" that the web application can use to login, upload sets and browse with!

12. Now, the last step is to follow the instructions on what to add in the configs directory of the codebase. Basically, you add a .env file and fill in the information of the database user you created ("pbUser"), the database name (pbdb), and information about your PostgreSQL server (localhost, port 5432).

After this, you should now be able to repeat steps 5-6 to start up the server and client! Hopefully this helps, I tried my best to give detailed instructions, let me know if there is confusion in the instructions.

 

[Wugus]

Thank you so much! That couldn't have taken a small amount of time to type up, I appreciate it!

 

[Wugus]

The only confusion I have right now is in step 12. I am not quite sure what you refer to when you talk about "the configs directory of the codebase." Where is that located and how do I add the .env file? All of the other instructions are very clear. Thank you!

 

[tofa]

The only confusion I have right now is in step 12. I am not quite sure what you refer to when you talk about "the configs directory of the codebase." Where is that located and how do I add the .env file? All of the other instructions are very clear. Thank you!

Oops, sorry that wasn't very clear of me! The .env file should be placed in the server/configs directory of the pokebrowse codebase that you downloaded. If you are on Windows, creating .env could be a little tricky, but you could try this suggestion which should work (except you would create .env instead of .gitignore). If you are on OSX or Linux, you could open up a terminal and enter cd <full_path_to_server/configs>; touch .env. Hopefully it works out!

 

[Wugus]

I used the npm commands for the server and client, but all that happens is I get a command prompt that says my application is ready and nothing else. Did I do something wrong?

 

[tofa]

No, that should mean you did everything right Just go into your preferred browser like Chrome, Firefox or Edge, and copy paste this http://localhost:8080/browser and you should be able to play around by making an account, uploading some sets, and be able to browse them later on. Make sure the terminals that run npm run start, npm run startLogin and npm run serve remain open while you use the application; when you close the terminals, you close access to the application (any stored sets are saved even if you close the terminals though)! Also note that everything (client, server and database) runs locally and is only accessible locally on your computer, so any account you're making on the application and any sets you are browsing and uploading are only stored and accessible by you locally.

Also general recommendation, since your pbUser login credentials are stored in plain text in the .env file, I would use a pbUser password different from what I use for other purposes. If you didn't already do this and want to change it, you can always change the password of pbUser in pgAdmin if you want (and then also change it in .env). It's not the end of the world if you don't, just a recommendation!

If you're able to access http://localhost:8080/browser, register a pokebrowse account, sign in, upload sets and then find the set through the browser, then everything works! Congratulations on setting up a server, database and client!! I can say you are definitely not technologically illiterate if you were able to set up all of those things, great job

 

[Wugus]

Thank you so much! I appreciate you helping me out! One last thing, I was able to access pokebrowse at the local host but whenever I try to log in using my login credentials, I get a message that says "something went wrong." I have a feeling it might have to do with the npm run startLogin command. How might I solve this issue?

I hope anyone having the same problems is getting what they need to solve them!

 

[tofa]

No worries, it is helpful for me too! Your issue most likely has something to do with the database; are you able to search with just the default Excadrill filter? Correct behavior when searching an empty but correctly configured database should be just no results. But if you get an error like "Filter values are invalid, please fix the filters" when trying it, then it has to do with the database. Either your credentials in the .env file are not correct, or the database isn't running at all. If you are on Windows, the instructions I gave should by default have the database running locally in the background when you start up the computer, so that shouldn't be the problem.

Make sure the database credentials in .env are correct. Is the password you provide in .env the password of the created user, "pbUser"? Did you name the created database user "pbUser"? I am talking about the user you created in the instructions, not your default database user. Is the rest of the .env correct? Is your .env file in the server/configs directory of the pokebrowse folder that you downloaded from Github? Is the file actually called ".env"? The answer to these should all be "yes".

For a PostgreSQL server named "pokebrowse", containing a database called "pbdb", with a created user called "pbUser" with password "pbUsersPassword", the lines starting with "PG" in the .env should look like this:

PGHOST='localhost'
PGUSER='pbUser'
PGDATABASE='pbdb'
PGPASSWORD='pbUsersPassword'
PGPORT=5432

Note in particular that PGDATABASE should have the name of the database, "pbdb", and not the name of the PostgreSQL server, "pokebrowse".

Let me know if checking/fixing any of this worked for you! I would guess it might be the PGDATABASE value that's causing the issue, but could be something else.

 

[Wugus]

I adjusted the .env document in the case that was the problem. Once I have access to pokebrowse, I put in my log-in credentials and nothing happens. Clicking on browse shows the filtered search for Excacrill before quickly redirecting back to the sign-in page, which I still can't seem to log in at. Do you know what the problem might be here? I am not getting error messages with the filters, so I think that might rule out the database being the problem.

 

[tofa]

Okay! If you no longer receive "Something went wrong" when trying to log in, then changing the .env most likely worked to fix your previous problem and the database is now properly accessed. If you now get error messages like "User does not exist" when trying to log in, I suggest a fix to that below. If you do not get any error message when trying to sign in, but stay signed out, then unfortunately at that point I'm not sure what's wrong :(

Not sure what you mean next though, do you mean "Browse" in the left sidebar menu? That's odd, I have not placed anything that prevents a signed out user from staying on http://localhost:8080/browser, you should be able to click the "Search" button here (although you will not have any results yet since you haven't uploaded any sets). There should be no redirects after clicking "Search", you should stay on http://localhost:8080/browser, but just have an empty search result. Maybe we are using the term "redirect" in different ways, in that case no worries.

The only thing that should change between a signed in and signed out user when in http://localhost:8080/browser should be that the panel in the right sidebar should toggle between "Sign In" (if you're not signed in), or "Upload Set" (if you are signed in), as shown in the example images in my original post. The search mechanism should not be affected by this. Hopefully your situation matches up with this.

I'm running out of ideas now, but make sure to register a pokebrowse user! The database user/your PS user is not what you should use to "Sign in" in the side panel; you need an account on the pokebrowse application itself as well in order to upload sets under that username. In the sign-in panel in http://localhost:8080/browser, there is text that says "No account? Sign up!". Click the link to sign up, and create an account to use in the pokebrowse application itself; you then have to log in with that account as well after registering. When you have done that, you could go back to "Browse" and the "Sign in" panel should be replaced with "Upload Set". From there you should be able to upload imports with descriptions, which should then be searchable e.g by species, speed tier or author.

Also note that the application works locally for now, the sets I have on my local pokebrowse will not show up for you on your search results; if you have not uploaded sets to your local application, you will get empty results when Searching until you add sets yourself!

 

[Wugus]

I am not sure what the problem is at this point either. I try registering a username and password on the actual application, but nothing happens when I click sign in. I've tried using Microsoft Edge instead of Chrome, but that did not help either. I am able to access the browse menu via the sidebar, it's just that I can't log in to upload sets of my own.

If there are any changes made in the program, I am happy to help out. I still really like the concept for the application and I hope that I can eventually get it working!

 

[tofa]

Ok so I've now tried setting up the application from scratch on a Windows installation (and also on OSX) by following the instructions and they produce a working application in both cases. However, I think I was able to reproduce the behavior you described. Specifically, if you have a missing .env file, any database access attempts such as searching for sets, posting sets, signing in or registering will crash the server/login server.

So I believe you have a missing .env file. Therefore, in the case you describe, what I believe happens is the login server crashes when you try to sign in through the sign-in panel in http://localhost:8080/browser. This causes an error on the client side since the communication with the login server is interrupted, and the client handles this by redirecting you to http://localhost:8080/login to try again. And since the login server has crashed, any subsequent sign-in attempts from http://localhost:8080/login will also fail, and it will seem as if nothing happens. Similarly, when you try to use Search from http://localhost:8080/browser, it would show nothing on the client but the server will crash (and eventually would show "Failed to fetch").

So, how could the .env file be missing when you have created it? My best bet is that you have accidentally created something like .env.txt as opposed to .env; when I changed from .env to .env.txt, I got the issues described in the above paragraph. The suggestion I linked before should work for creating a proper .env file, that is the approach I used on Windows and it worked for me! Also, make sure it is in pokebrowse-http\server\configs, but I'm pretty sure you already did that!

The fact that the servers are crashing in this case is not very good, I should probably look into that. But without a .env the application won't work anyway. In any case, the client and servers should handle errors like this better, and it's good that we've had this discusison so I was made aware of this type of problem! If you do not feel like experimenting with this any longer I completely understand, I will work towards hosting this on a website at some point anyway so others can use it without having to install anything. However if you do decide to try fixing the .env file, let me know if it worked for you!

 

[tofa]

Also, in the future if anyone else has installation problems/bugs they want to report, I'm happy to look at them when I have time, these should be sent as issues on Github (you're good though Wugus dw, I was the one who didn't specify this ^^ we can finish up here or move to DMs if you want). Mainly so this thread can be more about discussion related to possible extension ideas, feedback or other discussion!

 

[TheArcherFish]

This is so good that I feel like they should it into the native teambuilder. Phenomenal work my guy!

 

[tofa]

Thank you, that means a lot! I'll get a version of this up and running at some point, I promise I haven't forgotten about this project :)

 

[tofa]

Hey again, the website is now up on https://www.pokebrow.se/ but is pretty empty in terms of sets :) feel free to try it out or use it to collect your interesting sets over time! TL;DR of the features:

1. Upload sets with descriptions and mark them as public or private
2. Browse your own sets or the public sets of others and filter by date, author, species and more; copy search results as imports that can be used on Pokémon Showdown
3. Rate sets from other users that you like (not sure if I want to keep this functionality, we'll see)

Browsing does not require an account, but for 1&3, a Pokebrowse account (username, email) is needed. The email is only used to verify the user after signup and for resetting your password if you forget it, and is not shared with other users. If you create an account and at any point feel like you no longer want it, let me know and I'll see that I remove your account information and content.

The website does not always give very descriptive error messages if a user does something unintended, so if there are any questions on how to use the website, let me know and I'll see if I can help!

If there are any questions, suggestions or ideas, I'd be happy to reply to and consider them, but for my own sake I won't make any promises on when or if they can be implemented :)

 

[tofa]

Thank you for the kind words! Also, no need to download anything - you use the app directly through the website :)

Cheers!

 

[Aqua Jet]

Super cool project! I was wondering though, is it possible to change the e-mail you assisicated with an account? I accidentally typed in the wrong e-mail when reigering, and now am unable to upload and rate sets.

 

[tofa]

Super cool project! I was wondering though, is it possible to change the e-mail you assisicated with an account? I accidentally typed in the wrong e-mail when reigering, and now am unable to upload and rate sets.

Thanks! Yes, I can change that for you if you'd like np :) PM what you'd like to change it to and I'll fix it; if you don't want to do that, I can manually verify your account as well!

 

[tofa]

Made some minor updates to support Gen 9 uploads!

 

[tofa]

Hey, just a note - I'll be taking down the website & server for the time being, as I would like to put the money towards exploring other topics. I don't think anyone would get upset with me over this though based on the activity I'm seeing hehe. And nowadays, there's the much more useful and integrated alternative of PS server-side team storage, courtesy of Mia :)

Nevertheless, this was a fun exercise in building & deploying a service and some of the work surrounding that!

I have dumped the uploaded sets (public & private) to a file, so if there's anything that anyone wants, just let me know and I'll get to it. Thanks :)