Our company website done as SPA

So during the day I work as a UI/UX designer for a SaaS company that builds software for desktop and mobile apps. We needed to redo our company website with our imminent first product launch later this year and I used Wappler! Also bult it as a SPA with all the content pages loading into the main view.

We have a talented game developer turned front end developer turned illustrator that did all our illustrations and it gives the brand a very approachable and friendly feel.

Some things like the pricing page and added css I hand coded but most of the site was built very visually.

WAPPLER REALLY MAKES BUILDING SITES LIKE THESE EASY AND FUN!

https://webill.net/

11 Likes

What a great website! Thanks for sharing it with us, Marcel! :slight_smile:

1 Like

It looks very nice!

Why did you choose SPA?

1 Like

@JonL There really is no specific reason. Our company apps are all react and react native based and I guess I wanted to “show off” to the developers at the office :slight_smile: Just joking, but really I could have built the exact same thing as normal page website and maybe just used includes for the header and footer.

1 Like

Looks great Marcel! Congratulations!

Well done as SPA! This approach has indeed many advantages like speed in loading and much better user experience as the site looks and feel much more like an app than a regular website.

4 Likes

Congrats!

1 Like

I love the site and the idea of using SPA and thanks for sharing.

However, I would not be the grumpy old man that I am if I did not point out that, if you are concerned about SEO, you will need to do something about the Title and Description of each of your page views. Please have look at Correct Title and Meta Description for SPA

2 Likes

Thanks @ben I have not done or attempted to do SEO yet - just got the site up for now. We have a SEO and Social Media strategy and I will use your recommendation.

1 Like

Great job, Marcel. I especially liked the way the logo changed on scroll as the navbar became semi-transparent - nice touch.

1 Like

Hi @pixlapps,
Love the SPA website so much I’m trying to build one too. I have most of it figured out but am struggling when navigating between ‘pages’. The scroll position of the page seems to be remembered so when clicking away and coming back to the same page, it is often already scrolled part/all way down and looks odd. I noticed yours always returns to the top of the content - how did you achieve this?
Many thanks,
Ben

1 Like

Really good job. Looks great!

1 Like

Well done, I am sure Tom, Dick and Harry will be far happier with this, hahaha, it’s amazing how you can spot a South African website in a second when you are a fellow South African.
Really really good Job.

1 Like

Create an on-click event for the menu items and use Smooth Scroll to scroll to the top

image

and, where #index is the ID of the BODY tag.

2 Likes

Incredible! Thanks. I had smooth scroll on the page but hadn’t used it correctly. You are a true gent.

1 Like

thanks @ben for keeping the fort! Returned from a well deserved holiday over the weekend. Back to the grind today!

2 Likes

Its 3 years on since this nice website was developed.
@pixlapps I read the part about “showing off” with the SPA, but if you were to do it again today, fresh start, what would you do different?

I don’t think SPA with NodeJS was an option back then.
Does anyone know how it would be different/better if the same site was done using NodeJS today?

Thx

@Robert_LM Thanks for reaching out. Working at WeBill only as the UX Designer with the know how to code and design UI, I learned a lot from the real developers in our company working with React, React Native and some other frameworks. I also developed front ends using Tailwindcss which would then be used by our developers to add the javascript frameworks to give it life.

Why am I saying all this…?

Currently I am building a massive money management system for the company I am employed at. I am fortunate to be the only only developing this Proof of concept and even more than a proof of concept.

And why am I mentioning this :slight_smile:

It is done using node.js, bootstrap with layout pages and views. My continual challenge is to apply what I learnt from the “REal” devs and find ways to “modularise” and break up big chunks of code into smaller manageable pieces(components) which could be managed in a better way when the team grows if the team grows.

Also where can we re-use pieces of code. With Bootstrap as framework you would say it is quite easy, but a component is made up of different “pieces” like html, css, interaction javascript and data includes. This causes me to ask: Can I use this form for inserts and updates and build a more clever backend to do the heavy lifting? Could I repeat through queries and sub queries and re-use tables in front end using dynamic code and not just leave it as separate static sections.

With regards to Wappler and it’s frameworks, I still have so much to explore and see what is possible. I my view the front en is still very limited in terms of building a manageable system for big teams. Someone could please correct me if I am wrong.

But where the front end lacks, the back end shines in all it’s glory. Using the library to build re-usable server actions that can be run one after another and reused anywhere is just so powerful. I started out the system not understanding the power of the library actions, but as I progressed and the backend grew into an ugly bloated beast, I was forced to rethink my approach.

The power of node.js to run server side without having the user staying on a specific page has also made it possible for me to take a simple budget input and use parameters the user entered on registration to end up with cashflow projections over their lifetime which includes annual tax calculations, reinvestment of money and various rates applicable to different incomes , expenses and investments. All of this is triggered on a form post success and the user might see it is happening in the background should they browse to a page where the data is displayed. For a couple of seconds they might see a loader overlay on a graph which fades away as the calculation is completed server side.

I have so much to learn, but this is my experience over the past couple of years.

3 Likes