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?
Top comments (20)
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!
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.
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.
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.
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.
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.
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.
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 ;)
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.
My latest open sourced project combination framework/UI components: