Titan | Meteor + Apollo Starter Kit - With Magic Link authentication, TypeScript, Storybook and Jest set-up!

The first time I used Meteor, something clicked.

I was a WordPress Designer trying to teach myself to code, and I’d hit a wall.

I knew I wanted to build full-stack web applications, but I just couldn’t get my head around the tools out there; I’d tried and failed at Rails, I’d tried and failed at using Django, I’d tried and failed at cobbling together my own Node API with React frontend.

Meteor was the tool that finally did it for me; by taking away the complexities of authentication systems and setting up databases and connecting the client to the server, and letting me just focus on the code.

Seven years have passed since then, and I’ve built a lot of different full-stack apps in a lot of different frameworks - and still no framework has come close to giving me the speed that Meteor gave me.

I don’t know about you guys, but I am very excited about the Tiny acquisition and what that means for the future of Meteor - I wanted to dive back in, but it was hard finding any tutorials or boilerplate that was still maintained.

That’s why I built Titan.

Introducing Titan

Titan is an opinionated Meteor boilerplate that’s production-ready for 2020.

It has everything you’d expect of a JS app coming into this decade:

  • Apollo + GraphQL set up on the server

  • TypeScript everywhere™

  • Jest + Storybook + ESLint for testing

  • Bulma + SCSS for styling

  • Font Awesome added

  • React-Router set up

  • :sparkles::mage:‍♂ Magic Link authentication (think Slack!)

The demo I’ve set up is a typical CRUD goal-setting app, where you have to login to see your goals and can only ever see your goals. Hopefully this will work as a good example or starting point if you’ve been trying to get any of the above to work with Meteor (particularly if you’re using TypeScript!).

There’s still a lot I plan to do, including fixing a number of linting issues and tidying up some of the code - but I thought now was as good a time as any to share with the wider community :blush: If you find any bugs or would like to help improve it, then hit me up!

14 Likes

Cheers! :clinking_glasses:
Looks interesting! I have made a bit different choices, but still I’m looking forward to see how you integrated Storybook and the Magic Link authentication.

Wow, that’s great. I’ll try it right away :wink:

Hi Alex, your work is definetly amazing and very helpful for newbies.

Imo, you should remove imports folder and define entry points in package.json. Those entry points must show client and server folders. Those folders are not only seperating codes but also seperates the logic. Otherwise the client and server will be mixed somehow.

Besides that you will need a both folder which client and server can share the same code. I’m writing utilities, constants, functions etc… in this folder.

2 Likes

I agree with defining the routes in package.json, but I’m not sure that moving things from imports directory is advised, that I think depends how you do SSR.

It is recommended to use the latest Apollo client 3 and hooks, the current version is too low, such as whether the following versions should use the latest, after all Apollo is always evolving

Apollo - the client - > @ Apollo/client

There is no sample code for SSR yet, hopefully you will add

Thank you very much, because I happened to be using meteor + Apollo, I have some minor problems, I would like to get help from your sample code

Appreciate the replies! Some really good points, I’m going to be working on some fixes over the weekend so will see if I can’t implement some of your suggestions :slight_smile: