- A
- N
- N
- I
- E
- T
- A
- Y
- L
- O
- R
- C
- H
- E
- N
The Making of Meowflix
Meowflix is my first project made with Svelte, a Javascript compiler. I wanted it to be a fun project that reflects my design and my love for movies. It is also a project that extends from another one called Meowlo , a cat startup. If you're interested you can read The Making of Meowlo .
What I did
- Web Development
- Content Creation
- Graphic Design
- Ecommerce Integration
Tech I used
- Svelte
- Strapi
- Stripe
- Netlify
- Digital Ocean
Strapi as CMS
Strapi is an open source CMS. It's very easy to set up a strapi server locally and create content types in development mode. Then I ran a local build and uploaded it on Digital Ocean's VPS for hosting. The best thing about Strapi is that it comes with admin panel, from here you can easily manage the content, users, and orders. It also provides option to use plugin so images can be uploaded directly to Cloudinary, a third party media hosting service. GraphQL plugin also makes it easier to query data when you have more complicated content types. Then you can get your data through endpoints and use them in your front-end. Thus you can host your front-end and back-end on different servers.
For payment I use Stripe and changed the UI to fit into my own design system. After the charge is successful, you shall get some cat loving! 😻
Svelte for Front-end
Svelte is a Javascript compiler which enables developers to write less code to perform the same functions. The bundle size it sends is also a lot smaller, and it doesn't use virtual DOM. It almost "disappears" in the front-end, that's why it is blazingly fast. Svelte's state management is also easier than, for instance, Redux for React. Not to mention the integrated transition and animation in Svelte has made it super easy for developers to improve user experience through adding a little visual effects.
You might also notice there is a "recommendation" in each movie page. Currently it's just a fake algorithm to randomly generate four movies to show, but in reality it's possible to track your user preferences and combine that with catalog categorization to provide a personalization service.
Last but not least, I hope you enjoy those funny Meowflix Originals movie posters designed by me. 🐱 If you want to suggest more fun ideas about movies, feel free to drop me a line.
