Jump to content
Perseus

[0.1.0] topCMS

Recommended Posts

Hi,

 

as you know I previously released a new website for Tales of Pirates. I had planned to make updates to that one but due to college and graduation and everything, I ended up not really working on it again.

Long story short, here's a new version of the website that I had made, with more features and something that I'll actually be updating regularly according to community response.

 

You can download the website here: https://github.com/perseus/topcms

 

I'm also hosting a live version if you want to mess around with it here: https://topcms.anirudhsingh.dev/

 

 

The features that it currently has:

  • Basic site management ( news, downloads, authors etc.)
  • Ranking (Guild and Player)
  • A bare-bones admin panel that I plan to extend
  • A functional item mall and award center
  • Logging system ( I have the base for this set up but no UI. I'll be adding a UI which will allow you to look through any "critical" actions taken by GMs or players on the website )

 

The design isn't the best (I'm not a designer) so I'm open to any design feedback that you guys have.

Here's a few screenshots of what it looks like:

 

image.png.7a668a36bc604db42c5915ba926cc194.png

 

image.png.ab9af8bb5a2757cdf59b1aab5d23f72c.png

 

image.png.a48f97fe95b9ec1f9cf5feb78d8639a0.png

 

image.png.af55e7574188be47af00249e96c9d20a.png

 

image.png.11c28a9e3c98d8fad348cf87b4fcdb56.png

 

image.png.0d12b4d76d0ca7525aac1079d0c3ad19.png

 

image.png.9fb9146dd1ee2626a8e4c161c9ab96bc.png

 

image.png.7a1235f963666f7864a0d1623a027324.png

 

image.png.dd380035cfbe9e1660a91ec9b62d19be.png

 

Installation Instructions

You're going to need NodeJS for this. You can find it here:  https://nodejs.org/en/

You can download the latest LTS version (12.17.0) and install it.

 

Then, you need to open your command prompt (run it as admin), and `cd` into both the `api` and `web` folders and run

npm install

(For people who aren't well versed with the command prompt) :

"cd" is a command to change your current directory in the command prompt. If you have downloaded and extracted the website in the F: drive inside a "topcms" folder for example, the commands you would run after opening a command prompt are:
F:

 

cd topcms

cd api

npm install

cd ..

cd web

npm install

(".." is used to go to a directory that contains the current directory (basically go one up from where you currently are ))

Next, `cd` into the `api` folder and run

npm run install-wizard

 

This should start an installation wizard on `localhost:4000` that you can go through and it'll set the website up for you.

 

Next, to run the website, cd into the `api` folder and run

pm2 start dist/server.js

and the website should start at port 3000. (You can access it by going to `localhost:3000`)

If you want to run it on port 80, go into the `api` folder and look for a `.env`. At the end, write
 

port=80

pm2 is a process manager for node, which is used to run production applications and handles a lot of things that make it easy to run (automatically restarts the app if it crashes etc)

 

Some pm2 basics:
run

pm2 start dist/server.js

from inside the API directory to start your server

run

pm2 list

to see the currently running processes (you should see your server running if you do this)

run

pm2 kill

to stop any processes that are currently running. You need to do this and then "pm2 start" again if you want to restart your server.

 

There are a few more configuration related things that I'll be putting up here but I hoped to get it into your hands so I could iron out any bugs and get this ready to be used by everyone.

 

Please let me know if you run into any issues or if anything needs to be made clear here.

Edited by Perseus
  • Like 8

Share this post


Link to post
Share on other sites

Just to give an update on what I'm working on apart from fixing bugs and stuff:
 

Payment

One of the things on my list was to have an automatic payment system that awarded mall points the moment the payment was done instead of having to go through the painful flow of them donating, sending you an email and then finally getting the points.

I plan to integrate the following 2 payment providers initially:

  • PayPal
  • Xsolla

Action Log (for admins)

Another one was an easily viewable/searchable log of all "important" actions taken by users or admin accounts on the site. I've already kind of laid down the foundation for this (you can see log files in the api folder for certain actions like mall purchases, category/item creations etc.). I plan to improve this and make it easy to keep track of what's going on on the website.

 

Server Database

This is nothing novel, but I really like how PKO has done the databases of monsters, items etc. available on the website. It's really useful, so I plan to implement something similar on this as well. This would be a pretty big feature, would contain things like portal opening times etc. as well.

 

Some ideas-

 

Pirate Clubs

This has been on my mind for a while, I haven't fully thought out how the feature would work, I remember playing original ToP and joining these clubs but it was a while ago and I don't remember exactly how the implementation was on it. Definitely looking for thoughts/ideas on how this could be approached

 

Media Gallery

I'm not really sure how high the demand/utilization of something like this is, but I'd be open to implementing a media gallery for players to share stuff on if the interest is high enough on this.

 

 

Definitely looking for feedback/suggestions on all of the above and anything else you would like to see.

Edited by Perseus
  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...