DEV Community

William McGonagle
William McGonagle

Posted on

🤔 How should I build my Frontend for a huge project?

I’ve been working on building a non-profit, open-source organization for a while now and we have gotten to a solid point in the backend code. We have authentication, an event and rsvp system, profile picture generator, etc. If you want to check it out, you can here.

I’m also working on a frontend, but I’m at a stage where I can change the stack for it completely, so I wanted to hear your suggestions! You can check out the code so far here, and the domain for the website is fairfieldprogramming.org.

Do you think I should switch to react, pure html/css, or should I use vue? And how do you think I should communicate with the server?

Discussion (24)

Collapse
moboudra profile image
Mo Boudra • Edited on

I agree with the Next.js / TailwindCSS suggestion, I see that your page has a lot of static content so you'll benefit from having some kind of Server Side Rendering with the ability to have some dynamic stuff like forms. TailwindCSS really speeds up styling once you get the hang of it, but if it's too intimidating you can use a more traditional CSS framework like Bulma or Bootstrap or even use a pre-built template.

Having said that, you can never go wrong with plain HTML and CSS.

Good luck with your project!

Collapse
blindfish3 profile image
Ben Calder

Try Svelte: all the benefits of a component based framework, but very easy to learn and minimal boiler plate.

Regarding what you currently have: you might want to check the contrast of your text colour. It doesn't look particularly legible to me.

Collapse
cess11 profile image
PNS11

Quasar is a pretty nice framework on top of Vue. When things get huge it starts getting nice to have template, dependencies, JS/TS and styling bundled in bite sized pieces, and it comes with the infrastructure to build for SSR and phones as well as SPA:s.

williammcgonagle profile image
William McGonagle Author

All good dude- thanks for helping the site stay secure. If you ever need a project to work on, there’s always a place for security experts at the Fairfield Programming Association.

Collapse
iwashiding profile image
IWasHiding

well my advice is here is not to think a lot about stacks and technologies , and to think more about the architecture of you frontend application.
you can read this two blog posts
dev.to/huytaquoc/a-different-appro...
levelup.gitconnected.com/micro-fro...

Collapse
absphreak profile image
ᴀʙʜɪɴᴀᴠ sʜᴀʀᴍᴀ✩

If you really want to switch your stack to something else, I would suggest Next.js / TailwindCSS combination. You can build as complex of a frontend you want with Next.js and Tailwind will help you build and style your UI quickly, with a loose design system too. And you can always add Redux to manage complex UI states and everything else.

Collapse
superbiche profile image
Michel Tomas

Build a component-oriented frontend with TailwindCSS/WindiCSS.
After that it's a question of who will be working on the frontend and which frameworks they already know. I've worked a few years with React/Next.js, and switched - in my experience, for the best - to Vue/Nuxt. Pick your tool and stick with it.

Svelte is also a great frontend framework, but the ecosystem is still quite young. But it does rock.

In my opinion, I just find that React isn't that easy for newbies compared to Vue/Svelte. And scaling a small app from using Hooks to using Flux-like state management can be a pain. I don't like React hooks. The fact that it's backed by people at Facebook can be reassuring for some, for me it's another reason not to use it.
Vue 3 is best for me and my team, and Nuxt 3 is ready enough to start working with it.

Pro tip: don't start with Webpack, use Vite right away (be it with Vue, React or Svelte). You'll be stunned.

Collapse
kevinmerckx_47 profile image
Kevin Merckx

For any project that has a large code base, you should consider Angular. It is an opinionated framework, which means there is a learning curve. However, once you master the few key concepts of it, you will be able to build enterprise-grade application.

Angular will bring you the structure and the tooling that is needed to build a solid application. It comes with Typescript which solves many problems before runtime. If you need any hint or more info or guidance, contact me ;)

Collapse
alexisanzieu profile image
Alexis 💫 • Edited on

My latest open sourced project combination framework/UI components:

  • svelte / attractions: svelte is really easy to use, plug it with Vite and you won't be disappointed. Downside is that it's relatively new and the community is not as big as react or vue
  • nextjs / chakra-ui: Vercel did a great job with nextJS concerning rendering pattern and performances
  • nuxt / Element: Nuxt doesnt support vuejs 3 completely (SSR) so I would wait a bit for this one
Collapse
tqbit profile image
tq-bit • Edited on

I could not check your whole site (login and signup still seems to be disabled), but I see a lot of people suggesting SSR.

While it's generally a good idea, you might want to consider using a headless approach for your services. Since your target audience seems to be public institutions, it might be a good idea to provide each of them with a common interface.

On top of that, you can use pretty much anything you're comfortable with. I personally favor Vue, it felt easier to learn than React and follows good HTML / CSS / JS practices. And Nuxt, a Vue framework, comes with a lot of built-in development features, such as an HTTP client (axios), state management (vuex) and routing (vue-router). Since version 2.15.0, it can be used with Vite dev server support, so that might be a plus as well.


If you want to shoot for the stars, your project could make some good use use of JAMStack practices. There are some mature tools to help you with development and, if necessary, scaling.

All (bigger) frameworks have support for Static Site Generation by now, like React has Next.js or Gatsby, while Vue brings in Nuxt.js or Gridsome

You can then use CDNs by Vercel, Netlify or Digital Ocean Apps to serve your static content.

Collapse
jancizmar profile image
Jan Cizmar

I would go for Next as well. It is SSR framework, so it's going to be fast and SEO will be fine. There's probably no better option to go for now. Svelte is great and I love it, but if it still doesn't seem that there is huge demand for Svetle developers yet.

Collapse
starswan profile image
Stephen Dicks

You haven't said what your back-end is built in, but often for simple sites like yours there shouldn't really be any need for a separate 'front-end application'. Both Rails and Django have really simple HTML rendering setups, so your site can be simple to maintain. - hence faster to build things compared with JavaScript solutions (IMHO)

Collapse
ivanjeremic profile image
Ivan Jeremic

Next.js

Collapse
gktim profile image
gkTim

Have a look at Nuxt.js would fit your use case. Easy to learn, good documentation. For CSS have a look at windicss or tailwind

Collapse
adamalicki profile image
Adam

Agreed, there is far less friction getting an app up and running and making modifications to it that Next/React.

Collapse
lucamug profile image
lucamug

Elm and elm-ui

Collapse
williammcgonagle profile image
William McGonagle Author

Please let me know down in the comments! Also, you can heart the comments that you really like. 👍

Collapse
williammcgonagle profile image
William McGonagle Author

bro r u trying to test cross site scripting on my post

Collapse
chema profile image
José María CL

NextJS has a lot of advantages. I recommend it

Collapse
brandonwallace profile image
brandon_wallace

If you have strong CSS and design skills use CSS/HTML on the front end. If not you can use a CSS framework.