SA-MP Forums

Go Back   SA-MP Forums > SA-MP Scripting and Plugins > Filterscripts > Tools and Files

Reply
 
Thread Tools Display Modes
Old 26/03/2018, 10:58 AM   #1
BroZeus
High-roller
 
BroZeus's Avatar
 
Join Date: Jan 2014
Location: India
Posts: 1,411
Reputation: 173
Default node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

node.ucp




This is a full-fledged isomorphic javascript control panel written on top of nodejs and react. The purpose of this control panel is to serve as an example or boilerplate code for others as it is fully-fledged and very flexible.

I wrote the code to be easily adaptable for different use-cases and database types and structures. You can find solutions written by me to many problems related to server-side rendering, react, handling cache busting of volatile resources in service workers and handling sessions manually in the source code of this application.

The code uses ES6ís arrow functions and Promise vastly, so get familiar with these concepts if you are not already! I have tried to comment as much as possible to explain the working of the application in the source code, however, if things are not clear feel free to ask.

Demo

Username: Jonas
Password: test

Click here for the demo.
Click here for the images in-case the demo is not working.

Github

See github repository for more instructions.
Github repo link


SA-MP Map in UCP

Some players may not use the full UCP but the SA-MP Map feature of this UCP is pretty unique so I would like to showcase it specifically.
Link to it: https://node-ucp.fgethell.xyz/properties
Features:
  • Location tracking: If you zoom in on the map and move across it, you will notice that the location on the bottom left corner will change.
  • Filters: It has filters to enable/disable icons on the map.
  • Properties information: If you click on icons you can see information regarding properties. This tooltip for showing information can be customized according to your needs!
__________________


"Be the change that you wish to see in the world."

Check out my Github profile!

Last edited by BroZeus; 31/03/2018 at 01:44 AM.
BroZeus is offline   Reply With Quote
Old 26/03/2018, 11:01 AM   #2
DavidKember
Huge Clucker
 
Join Date: Jun 2014
Posts: 226
Reputation: 30
Default Re: node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

This is lit. I'll give it a try and let you know about what I think.
DavidKember is offline   Reply With Quote
Old 26/03/2018, 11:07 AM   #3
DavidKember
Huge Clucker
 
Join Date: Jun 2014
Posts: 226
Reputation: 30
Default Re: node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

It's pretty simple but yet it's discreet. It's pretty easily adaptable. Good job. This could be really helpfull for the newbies.
DavidKember is offline   Reply With Quote
Old 26/03/2018, 11:15 AM   #4
StrikerZ
High-roller
 
StrikerZ's Avatar
 
Join Date: Mar 2016
Location: India
Posts: 1,109
Reputation: 154
Default Re: node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

That's dank
__________________
StrikerZ is offline   Reply With Quote
Old 26/03/2018, 12:15 PM   #5
Revazix
Big Clucker
 
Revazix's Avatar
 
Join Date: Sep 2015
Posts: 62
Reputation: 12
Default Re: node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

good job mate!
Revazix is offline   Reply With Quote
Old 26/03/2018, 01:08 PM   #6
Dice_
Huge Clucker
 
Dice_'s Avatar
 
Join Date: Sep 2015
Location: Indonesia
Posts: 489
Reputation: 56
Default Re: node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

Dope af.
Good job!
__________________
Dice_ is offline   Reply With Quote
Old 29/03/2018, 10:05 AM   #7
WarZ
Little Clucker
 
Join Date: Aug 2017
Posts: 39
Reputation: 4
Default Re: node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

Zeuuus ._.
it's Same of eXm's UCP ( you are the dev there i know )
Good job btw
__________________
Real Owner and founder of Call of duty Ghosts. - Server will come back soon.
https://www.*******.com/watch?v=WGNX2O4YUUo

Quote:
Originally Posted by zeest View Post
i want to complain a player name giovanny18 he is spawn killing me 10times
WarZ is offline   Reply With Quote
Old 29/03/2018, 11:18 AM   #8
Y_Less
Beta Tester
 
Y_Less's Avatar
 
Join Date: Jun 2008
Location: 629 - git.io/Y
Posts: 14,988
Reputation: 3151
Default Re: node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

This is not isomorphic at all. A universal app should render both server and client side, so why do you need an "INITIALIZING AWESOMENESS" message, instead of just delivering fully rendered HTML? Basically, this is totally broken for any without JS, or with it disabled. For a moment I was quite interested in the prospect of a UCP that was rendered server-side, since it's far too rare a commodity in web design today. This is not it.
Y_Less is offline   Reply With Quote
Old 29/03/2018, 11:39 AM   #9
BroZeus
High-roller
 
BroZeus's Avatar
 
Join Date: Jan 2014
Location: India
Posts: 1,411
Reputation: 173
Default Re: node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

Quote:
Originally Posted by Y_Less View Post
This is not isomorphic at all. A universal app should render both server and client side, so why do you need an "INITIALIZING AWESOMENESS" message, instead of just delivering fully rendered HTML? Basically, this is totally broken for any without JS, or with it disabled. For a moment I was quite interested in the prospect of a UCP that was rendered server-side, since it's far too rare a commodity in web design today. This is not it.
It is isomorphic and the content along with data is rendered on the server-side. If you right-click on the page and click on view page source option you will actually see that it is indeed rendered on the server side(view-source:https://node-ucp.fgethell.xyz/top/cash). The "initializing awesomeness" part is for authenticating login cookies since the isomorphism is mainly for crawling bots and they are not supposed to have any login cookies so I don't have a check on server-side for it.
__________________


"Be the change that you wish to see in the world."

Check out my Github profile!
BroZeus is offline   Reply With Quote
Old 29/03/2018, 11:46 AM   #10
Y_Less
Beta Tester
 
Y_Less's Avatar
 
Join Date: Jun 2008
Location: 629 - git.io/Y
Posts: 14,988
Reputation: 3151
Default Re: node.ucp - A full-fledged isomorphic UCP [nodejs + reactjs]

Well I just get stuck on that splash page. The pages are there underneath, but I have to manually delete the div to see anything interesting. I didn't look much further, since I have to redelete the div on every page, but the properties page is just a grey box with a spinning box - so that information isn't pre-rendered whatever its meant to be (and I checked the DOM this time). And the `top list` link doesn't work at all (especially when you try open it in a new tab).
Y_Less is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Node/Pathfinding Calculator jeffery30162 Scripting Help 4 04/04/2016 02:16 PM
Help FCNPC NODE POINT DarkZeroX Scripting Help 2 28/06/2014 06:04 PM
FCNPC Node Help Weponz Scripting Help 0 11/06/2014 12:50 PM
GTA SA Pedestrian Node Help reiss82 Scripting Help 1 06/09/2012 06:20 PM


All times are GMT. The time now is 02:11 AM.


Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.