This document provides an overview of tools and frameworks for developing applications. It discusses evaluating tools based on existing skills, not reinventing the wheel, and just starting to build something. Popular full-stack JavaScript options like MEAN, MERN and MEVN are presented. Other topics covered include basic app anatomy, mobile development tools like Flutter and React Native, backend frameworks like Flask and Django, and various third-party APIs. The goal is to equip attendees with resources to help bring their ideas to life.
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
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
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.
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
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
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
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
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:
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
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