inflearn logo

Svelte.js SPA Movie Search Project

Create and deploy a Svelte-based SPA movie search site!

(5.0) 30 reviews

376 learners

Level Intermediate

Course period Unlimited

Svelte
Svelte
SPA
SPA
Svelte
Svelte
SPA
SPA
Thumbnail

Reviews from Early Learners

5.0

5.0

jude

100% enrolled

I completed the movie search project using Svelte :) Actually, I bought this course and watched only the beginning part, but it's been quite a while since I've been preparing to study front-end development in earnest after quitting my job, so I looked it up again. I first got to know the instructor through the YouTube Svelte course, and the explanations were simple and clear, and I guess... since he was a designer, he was really excellent at making it so that anyone could understand even if they had little basic knowledge, as long as they followed the explanations. I compared this course with the movie search site example made with Vue.js in the Fast Campus Super Gap package, and I could see that the amount of code was greatly reduced, and since the complex store concept of Vue was completely eliminated, I think I could grasp the big picture of the project design more clearly. And Svelte seems to be a framework that is developing rapidly day by day. Daum's home screen is already using Svelte, so I think it's more promising in the future because it has no shortcomings that can be used in practice. There are still a lot of react and vue, but I see the word svelte coming out little by little in the job market. ㅎㅎ If you want to become a front-end developer in the future, I highly recommend not only this lecture, but also instructor Park Young-woong's svelte introduction and complete guide lectures :D Thank you.

5.0

mysend12

100% enrolled

I was very interested in the front end, and the progression was so clean that it stuck in my head, and above all, I enjoyed it!

5.0

정현진 Jeong

100% enrolled

I learned a lot from the wealth of information that was actually helpful.

What you will gain after the course

  • You can configure a Svelte.js SPA (Single Page Application)!

  • You can leverage the advantages of SPA while compensating for its disadvantages!

  • You can easily build backend APIs using Serverless Functions!

Svelte utilization, with a hands-on SPA example you build yourself!

Please check out other Svelte lectures as well!
"Svelte.js Core API Complete Guide"
"Svelte.js Introductory Guide"


Getting Started!

Create an SPA (Single Page Application) example using Svelte.js!
You can use a router to distinguish pages and apply various features such as transition effects and scroll restoration.

You can quickly create and easily manage backend APIs using SF (Serverless Functions) without the burden of building a separate server.
Solve the security issues, which are a disadvantage of SPAs, quickly and easily!

Snowpack is the latest build tool,
allowing you to drastically reduce development build times.
You can develop in a much more pleasant environment!

We use Netlify's CD (Continuous Deployment).
When you upload to a GitHub repository, the site is automatically deployed immediately,
so you don't have to spend time on site deployment!


Please note!

This lecture requires prior knowledge, but I am explaining it as simply as possible.
It is even better if you listen to this lecture after building your Svelte basics with the previously released 'Svelte.js Core API Complete Guide'.


We will create an SPA site where you can search for real movies using the OMDb API!
By configuring the backend API with Netlify Serverless Functions,
you can provide search functionality to users without exposing your API Key.

GitHub Repo: https://github.com/HeropCode/Svelte-Movie-app
Demo: https://competent-cori-258206.netlify.app

 


Specs

Svelte
Snowpack
SPA Router
OMDb API
Netlify Hosting with GitHub(CD)
Netlify Serverless Functions


Packages

snowpack
@snowpack/plugin-svelte
@snowpack/plugin-dotenv
@snowpack/plugin-sass
@snowpack/plugin-optimize
@snowpack/plugin-babel
babel-plugin-transform-remove-console
svelte
svelte-spa-router
autoprefixer
postcss
lodash
axios
qs
netlify-cli


If you have any questions?

If you have any questions during the course, please use the Q&A page.
I will respond as quickly as possible.

If you are hesitant about taking the course or have any other pre-enrollment questions,
Pre-enrollment Inquiry please use the page.


Svelte Documentation.

If you need Korean documentation for the Svelte API,
please check the 'Svelte.js Complete Guide (Renew)' post.
https://heropy.blog/2019/09/29/svelte


Announcement!

2020.12.24
The following part has been added!
Please make sure to watch this before starting the full course examples!
- 2-1. Matching the Module Versions of Course Examples

Recommended for
these people

Who is this course right for?

  • For those who need Svelte.js usage examples!

  • For those preparing to build an SPA site!

  • For those who want to experience Netlify Serverless Functions!

Need to know before starting?

  • HTML

  • CSS(SCSS)

  • JS

  • Svelte

Hello
This is HEROPY

Career Verified

4,243

Learners

224

Reviews

162

Answers

4.9

Rating

3

Courses

Hello~ Nice to meet you! I'm Youngwoong Park, a frontend developer currently developing enterprise management solutions at a small startup. I also run the HEROPY tech blog.

Hello~ Nice to meet you!
I am Park Young-woong, a front-end developer currently developing enterprise management solutions at a small startup.

I run the HEROPY tech blog,
and I am also active in corporate training and online/offline lectures.

Blog: https://heropy.blog
YouTube: https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

Email: thesecon@gmail.com

    

More

Curriculum

All

49 lectures ∙ (7hr 46min)

Published: 
Last updated: 

Reviews

All

30 reviews

5.0

30 reviews

  • hanmg님의 프로필 이미지
    hanmg

    Reviews 10

    Average Rating 4.9

    5

    100% enrolled

    Thank you for the great lecture. I was able to get a lot of information about not only svelte but also netlify, which is necessary for practical deployment.

    • heropy
      Instructor

      I'm glad that my lecture was helpful to HAN_MG. I hope I can come back with a better lecture~😆 Thank you.

  • mysend님의 프로필 이미지
    mysend

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    I was very interested in the front end, and the progression was so clean that it stuck in my head, and above all, I enjoyed it!

    • heropy
      Instructor

      Thank you for liking my lecture~ I'm glad you enjoyed it. I hope the lecture was helpful~ Thank you.😉

  • mdhyunjin님의 프로필 이미지
    mdhyunjin

    Reviews 5

    Average Rating 5.0

    5

    100% enrolled

    I learned a lot from the wealth of information that was actually helpful.

    • heropy
      Instructor

      I'm glad my lecture was helpful! Thank you so much for your kind words. Have a nice week~😊

  • shk72301233님의 프로필 이미지
    shk72301233

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

    I completed the movie search project using Svelte :) Actually, I bought this course and watched only the beginning part, but it's been quite a while since I've been preparing to study front-end development in earnest after quitting my job, so I looked it up again. I first got to know the instructor through the YouTube Svelte course, and the explanations were simple and clear, and I guess... since he was a designer, he was really excellent at making it so that anyone could understand even if they had little basic knowledge, as long as they followed the explanations. I compared this course with the movie search site example made with Vue.js in the Fast Campus Super Gap package, and I could see that the amount of code was greatly reduced, and since the complex store concept of Vue was completely eliminated, I think I could grasp the big picture of the project design more clearly. And Svelte seems to be a framework that is developing rapidly day by day. Daum's home screen is already using Svelte, so I think it's more promising in the future because it has no shortcomings that can be used in practice. There are still a lot of react and vue, but I see the word svelte coming out little by little in the job market. ㅎㅎ If you want to become a front-end developer in the future, I highly recommend not only this lecture, but also instructor Park Young-woong's svelte introduction and complete guide lectures :D Thank you.

    • the27920609님의 프로필 이미지
      the27920609

      Reviews 13

      Average Rating 5.0

      5

      100% enrolled

      It's the best. It's a very clean lecture structure.

      • heropy
        Instructor

        Hi Jon~ Thank you for the wonderful and encouraging class review~👍 Have a nice day!🍀

    Similar courses

    Explore other courses in the same field!

    Free