1.
@chardane | bit.ly/eia-zero-to-hero
Zero to Hero
Tools to bring
ideas to life
01

2.
@chardane | bit.ly/eia-zero-to-hero 2
Agenda Before you code
Basic App Anatomy
Evaluating tools
Tools tour

3.
@chardane | bit.ly/eia-zero-to-hero 3
bit.ly/eia-zero-to-hero

4.
@chardane | bit.ly/eia-zero-to-hero
I'm Charlyn!
Software Engineer at Google, ex-Uber
etc.
󰗍 that is my puppy, Biscuit!
https://charlyn.codes
(my website that's not about code)
4

5.
@chardane | bit.ly/eia-zero-to-hero
Coding is kinda the easy part 😅
5

6.
@chardane | bit.ly/eia-zero-to-hero
Before you code
6
Have a plan!

7.
@chardane | bit.ly/eia-zero-to-hero
1 hour of planning can save you
10 hours of doing.
- Dale Carnegie
7

8.
@chardane | bit.ly/eia-zero-to-hero
Find a problem
Research, interview,
pick a focus
Design a solution
Prototype, user
research, iterate
Ship it
Release it into the world
and let people use it!
Build it
Use code to bring your
product to life
Product Lifecycle
8

9.
@chardane | bit.ly/eia-zero-to-hero
Focus on the user
experience
Build a Minimum Viable Product
(MVP)
Build the boring stuff,
but don't focus on it too
much
login/signup forms,
account settings, etc
Do things that don't
scale at first
9

10.
@chardane | bit.ly/eia-zero-to-hero
Basic App Anatomy
10
What makes a product work?

11.
@chardane | bit.ly/eia-zero-to-hero
Client/s
What your audience
or consumers see
Desktop, web, mobile,
etc. Could have one or
more depending on
user types
Server/s
Where the data and
much of the business
logic is handled
User accounts, billing,
state management
etc.
"microservices"
APIs
Third-party tools that
do specific things
Emails, image
classification,
notifications,
sentiment analysis,
etc.
11
Infrastructure
Parts that keep your
app running, enable it
to scale or keep it
secure.
Load balancers,
queues, caches, rate
limiters, etc.

12.
@chardane | bit.ly/eia-zero-to-hero
To Do List
EXAMPLE
user
MongoDB
ExpressJS

13.
@chardane | bit.ly/eia-zero-to-hero
Uber Eats
EXAMPLE
Eater
Deliverer
Uber Eats
Backend
Services
Restaurant
3rd Party APIs

14.
@chardane | bit.ly/eia-zero-to-hero 14

15.
@chardane | bit.ly/eia-zero-to-hero
Tips for evaluating
what tools to use
15

16.
@chardane | bit.ly/eia-zero-to-hero 16
Consider your
existing skillset
Use something somewhat familiar
1

17.
@chardane | bit.ly/eia-zero-to-hero 17
Don't re-invent
the wheel
Unless that's your entire product
2

18.
@chardane | bit.ly/eia-zero-to-hero 18
Just start.
You can always change it later!
3

19.
@chardane | bit.ly/eia-zero-to-hero
@chardane | bit.ly/eia-zero-to-hero 19
Some tools to consider
Based on my experience, not an exhaustive list!

20.
@chardane | bit.ly/eia-zero-to-hero
MEAN
MERN
MEVN
It's Javascript all
the way down
20

21.
@chardane | bit.ly/eia-zero-to-hero
MongoDB
Easy to use database to store data
21
ExpressJS
Handle custom backend logic
A/R/V
Client-side: Angular, ReactJS or VueJS
NodeJS
Run javascript on the server

22.
@chardane | bit.ly/eia-zero-to-hero 22
https://signoz.io/blog/mevn-stack-tutorial/
https://www.mongodb.com/languages/mern
-stack-tutorial
https://www.mongodb.com/languages/mean
-stack-tutorial

23.
@chardane | bit.ly/eia-zero-to-hero 23
Create cross-platform apps with one codebase
Android (Kotlin or Java) iOS (Swift or ObjC)
Flutter React Native

24.
@chardane | bit.ly/eia-zero-to-hero 24
● Getting started with Android
● Getting started with iOS
● Flutter
● React Native

25.
@chardane | bit.ly/eia-zero-to-hero 25
Flask
Web framework in Python
● How to build
Django
Another web framework in Python
● Getting Started

26.
@chardane | bit.ly/eia-zero-to-hero
Ruby on
Rails
A big framework that can
handle both client and
server side
● About Rails
● Getting started
26

27.
@chardane | bit.ly/eia-zero-to-hero
AI and machine learning APIs
27
● Clarifai for image recognition, OCR, and others
● Teachable Machine to train your own AI models
● Alexa Skills to build a conversational AI experience
● IBM Watson or Google Cloud for Natural Language
Processing, sentiment analysis and other machine learning

28.
@chardane | bit.ly/eia-zero-to-hero
Other useful APIs
28
● Twilio for sending SMS and voice calls
● SendGrid for sending emails
● Google Maps for mapping use cases
● Stripe for payments infrastructure
● Shopify for custom ecommerce

29.
@chardane | bit.ly/eia-zero-to-hero
No Code Tools
29
● Webflow for marketing and landing pages
● List of No-Code web app building tools

30.
@chardane | bit.ly/eia-zero-to-hero
and so much
more!
30

31.
@chardane | bit.ly/eia-zero-to-hero 31

32.
@chardane | bit.ly/eia-zero-to-hero 32
Focus on
Learning

33.
@chardane | bit.ly/eia-zero-to-hero
Thank you!
bit.ly/eia-zero-to-hero
33

34.
@chardane | bit.ly/eia-zero-to-hero
Add a main point
Elaborate on what you want
to discuss.
Add a main point
Elaborate on what you want
to discuss.
Add a main point
Elaborate on what you want
to discuss.
34
Write Your Topic or Idea

35.
@chardane | bit.ly/eia-zero-to-hero 11

36.
@chardane | bit.ly/eia-zero-to-hero
Write a caption for the photos.
36

37.
@chardane | bit.ly/eia-zero-to-hero
2 out 5
Elaborate on the featured statistic.
95%
Elaborate on the featured statistic.
123 million
Elaborate on the featured statistic.
37

38.
@chardane | bit.ly/eia-zero-to-hero
Use these icons and illustrations in
your Canva Presentation. Happy
designing! Don't forget to delete
this page before presenting.
Resource
page
38

39.
@chardane | bit.ly/eia-zero-to-hero
Write Your Topic or Idea
Add a main point
Elaborate on what you want
to discuss.
Add a main point
Elaborate on what you want
to discuss.
Add a main point
Elaborate on what you want
to discuss.
39
Add a main point
Elaborate on what you want
to discuss.
Add a main point
Elaborate on what you want
to discuss.
Add a main point
Elaborate on what you want
to discuss.

40.
@chardane | bit.ly/eia-zero-to-hero
Add a main point
Elaborate on what you
want to discuss.
Add a main point
Elaborate on what you
want to discuss.
Add a main point
Elaborate on what you
want to discuss.
Add a main point
Elaborate on what you
want to discuss.
Write your topic or idea
40

41.
@chardane | bit.ly/eia-zero-to-hero 41
Elaborate on what you want to discuss.
Flutter / React
Native

42.
@chardane | bit.ly/eia-zero-to-hero
42
Find more icons at
slidescarnival.com/extra-free-resources-icons-a
nd-maps
SlidesCarnival icons are editable shapes.
This means that you can:
• Resize them without losing quality.
• Change fill color and opacity.
• Change line color, width and style.
Isn’t that nice? :)
Examples:

43.
@chardane | bit.ly/eia-zero-to-hero
Item 1 Item 2 Item 3 Item 4 Item 5
50
40
30
20
10
0
Write Your
Topic or Idea
43
Elaborate on what you want to discuss.

44.
@chardane | bit.ly/eia-zero-to-hero
Write Your
Topic or Idea
44
Elaborate on what you want to discuss.

45.
@chardane | bit.ly/eia-zero-to-hero
Add a Chart Page
Name
Job Title
Name
Job Title
Name
Job Title
Name
Job Title
Name
Job Title
Name
Job Title
Name
Job Title
45

46.
@chardane | bit.ly/eia-zero-to-hero
Month 1 Month 2 Month 3 Month 4 Month 5
Tasks
Write your task here
Write your task here
Write your task here
Write your task here
Write your task here
Write your task here
Write your task here
Write your task here
Add a Gantt Chart Page
46

47.
@chardane | bit.ly/eia-zero-to-hero
Write Your Topic or Idea
Client side
Everything your user sees
Server side
Where data and a lot of
business logic are handled
APIs
Third-party tools for
specific functions
47

48.
@chardane | bit.ly/eia-zero-to-hero
Credits
Special thanks to all the people who made and
released these awesome resources for free:
• Presentation template by SlidesCarnival
• Photographs by Pexels
48

49.
@chardane | bit.ly/eia-zero-to-hero
Presentation design
This presentation uses the following typographies:
• Titles: Barlow Bold
• Body copy: Barlow Normal
They are free to use and easily available for download on the
Internet.
You must install them on your computer if you are going to edit this
presentation in PowerPoint®. 49

50.
@chardane | bit.ly/eia-zero-to-hero
How to Use this
Presentation
50
Google Slides
01. Click on the button under the
presentation preview that says
"Google Slides".
02. You will get a copy of this document
on your Google Drive.
03. You will be able to edit, add or delete
slides.
04. You have to be signed in to your
Google account.
PowerPoint®
01. Click on the button under the
presentation preview that says
"PowerPoint.
02. You will get a .pptx file that you can
edit in PowerPoint.
03. Remember to download and install the
fonts used in this presentation (you’ll
find the links to the font files needed
in the Presentation design slide)
Present with ease and wow any
audience with Canva.
01. Click on the button under the
presentation preview that says
"Canva.
02. Customize with text and photos. Add
elements from the library or upload
from your drive.
03. Apply page animations and transitions
to emphasize ideas.
04. Collaborate in real-time with
co-presenters to create a powerful
presentation.
More info at slidescarnival.com/help-use-presentation-template
This template is free to use under Creative Commons Attribution license.

51.
@chardane | bit.ly/eia-zero-to-hero
Free templates for all your presentation needs
Ready to use,
professional and
customizable
100% free for personal
or commercial use
Blow your audience
away with attractive
visuals
For PowerPoint and
Google Slides