Looking for the first job
Learn to code by building a vocabulary flashcard app
Flashcards for learning Japanese words that show me the words I get wrong more often than the ones I know
This is the path the studio planned from the idea above. Yours is planned from your own words and from what you already know, so its steps will be your own.
Planned for: Knows some HTML, CSS and JavaScript but has not built a full project · 20 hours a week · HTML, CSS and JavaScript, then Node and Express
Your first version
Kawaii Repeat
A flashcard app for Japanese learners that shows difficult words more often so you spend less time reviewing what you already know.
What the studio would build first, and what it sets aside, read from the idea the way your own project's would be.
What it keeps
- Create flashcardsAdd Japanese words with an English meaning and choose whether each card starts new.
- View and manage flashcardsSee saved cards in a list and edit or delete cards you no longer need.
- Practice with instant answersShow a Japanese word, ask what it means, and reveal the answer when you are ready.
- Review difficult words more oftenMark each answer as correct or incorrect and let cards with more mistakes appear sooner in later sessions.
- See learning progressShow simple totals for known, learning, and difficult words so you can see what needs practice.
- Keep progress after closing the pageSave cards and review results in the browser so they remain after a refresh or restart.
Later in your path
- Sync cards across devicesConnect the app to a Node and Express server so the same saved cards can be loaded from another device.With a server
- Keep each learner's data privateAdd sign-in and a MongoDB database so each learner can only see and change their own cards and progress.With a database and accounts
What it leaves out, and why
- Large Japanese course libraryCreating thousands of quality cards would slow down the first version, so learners will add a small personal deck.
- Import from CSV or AnkiFile imports add extra parsing and error handling that are not needed to prove the core review idea.
- Audio, strokes, and example sentencesThese make a richer study tool, but they are not needed for the first working version.
- Advanced spaced-repetition settingsThe first version will use a simple rule based on mistakes rather than a difficult scheduling formula.
- Friends, leaderboards, and shared decksSocial features need extra account rules and moderation and would distract from the learning workflow.
Your path
30 steps, about 30 hours
- 1 Show the Kawaii Repeat home page 1
- 2 Set up the flashcard form 1
- 3 Check the flashcard details 1
- 4 Read a new flashcard submission 1
- 5 Organize flashcard data 1
- 6 Show your flashcards 1
- 7 Keep your flashcards after closing the page 1
- 8 Manage your flashcard list 1
- 9 Tell the story of Kawaii Repeat 1
- 10 Give your cards a shared home 2
- 11 Set up the flashcard project 2
- 12 Prepare the app to talk to a server 2
- 13 Start your card server 2
- 14 Serve your Kawaii Repeat page 2
- 15 Plan the card API 2
- 16 Manage cards with the full card API 2
- 17 Sync your cards through the server 2
- 18 See what a server restart forgets 2
- 19 Keep cards in a JSON file 2
- 20 Keep bad cards out of the collection 2
- 21 Improve the flashcard sync 2
- 22 Show how Kawaii Repeat saves cards 3
- 23 Keep flashcards in MongoDB 3
- 24 Manage flashcards in MongoDB 3
- 25 Create a Kawaii Repeat account 3
- 26 Log in to your learning account 3
- 27 Secure account and card forms 3
- 28 Keep each learner's flashcards private 3
- 29 Run the complete Kawaii Repeat app 3
- 30 Show the Kawaii Repeat project story 3
In the browser
Your server
Where data lives
What you will have proved
60 concepts
Every concept is one the path teaches, in the order it teaches them, after the ones it needs first.
- Slice your idea into a first version
- HTML document and basic tags
- Lists, sections and semantic tags after HTML document and basic tags
- Forms and inputs after HTML document and basic tags
- Hover, focus, disabled and error states after Forms and inputs
- Finding elements on the page after HTML document and basic tags
- Decisions with if/else
- Handling what can go wrong
- Working with dates and times
- Responding to clicks and input after Finding elements on the page
- Reading and validating form input after Responding to clicks and input, Forms and inputs
- Arrays
- Loops after Arrays
- Objects after Arrays
- JSON after Objects
- Totals, sorting and grouping after Arrays, Objects
- Rendering a list from data after Objects, Finding elements on the page, Lists, sections and semantic tags
- Single source of truth after Rendering a list from data, Reading and validating form input
- Saving in the browser with localStorage after JSON, Single source of truth, Handling what can go wrong
- Create, read, update, delete after Saving in the browser with localStorage
- What a repo and a commit are
- Write a README after What a repo and a commit are
- Explain your project out loud after Create, read, update, delete
- Why your app needs a server after Saving in the browser with localStorage, Create, read, update, delete
- Meet your workbench after What a repo and a commit are, Create, read, update, delete, Why your app needs a server
- Terminal basics after Meet your workbench
- npm and package.json after Terminal basics
- Splitting code into modules after npm and package.json, Create, read, update, delete, Why your app needs a server
- Asynchronous code after Why your app needs a server
- Git in your workbench after What a repo and a commit are, Terminal basics
- How HTTP works after JSON, Why your app needs a server
- Calling an API from the browser after Asynchronous code, How HTTP works
- What a REST API is after How HTTP works
- Node: JavaScript outside the browser after npm and package.json, Splitting code into modules
- Your first Express server after Node: JavaScript outside the browser, How HTTP works
- Configuration and secrets after Your first Express server, Git in your workbench
- Middleware, static files, errors after Your first Express server
- Serve the page you built, untouched after Middleware, static files, errors
- Write your API's contract and try it after What a REST API is, Your first Express server, Serve the page you built, untouched
- Keep data in memory and answer from it after Write your API's contract and try it, Middleware, static files, errors
- CRUD API for your resource after Middleware, static files, errors, Keep data in memory and answer from it, What a REST API is
- Move your app from localStorage to the API after CRUD API for your resource, Calling an API from the browser
- Keep data in memory and watch a restart wipe it after Move your app from localStorage to the API
- Reading and writing a JSON file after Node: JavaScript outside the browser, Asynchronous code, Handling what can go wrong, Keep data in memory and watch a restart wipe it
- Validate on the server after CRUD API for your resource, Reading and writing a JSON file
- What a host needs from your server after Move your app from localStorage to the API, Configuration and secrets, Validate on the server
- Ship, get feedback, adjust after Slice your idea into a first version, What a host needs from your server
- Why a JSON file is not enough after CRUD API for your resource, Reading and writing a JSON file
- MongoDB: your first real database after Why a JSON file is not enough, Configuration and secrets
- Schemas and models with Mongoose after MongoDB: your first real database
- CRUD with MongoDB after Schemas and models with Mongoose, Validate on the server
- Signup with hashed passwords after Schemas and models with Mongoose
- Login and protected routes after Signup with hashed passwords, Middleware, static files, errors
- Security basics after Login and protected routes
- Relating documents after CRUD with MongoDB, Login and protected routes
- Users only see their own data after Login and protected routes, Relating documents
- Run it like production after CRUD with MongoDB, Configuration and secrets, Git in your workbench, What a host needs from your server
- Frontend and backend together after Run it like production, Move your app from localStorage to the API
- Portfolio and project story after Frontend and backend together, Write a README
- Interview on your full-stack project after Explain your project out loud, Users only see their own data, Frontend and backend together
What the checker will ask of you
Each step is checked when you press Check: in a real browser, or by starting your server and making requests. These are the first checks on this path.
index.html contains a main page heading with the text “Kawaii Repeat”.
The page contains a form with labeled input fields for a Japanese word and its meaning.
The JavaScript uses document selectors or another DOM lookup to find the form controls.
What people ask
What does it cost to build this?
Your first build is on us: one project, the phase in the browser, with the AI to build it. To start it, your bank puts a ₹1 hold on a card; it is released and never charged. Studio access is ₹6,999 once and opens every phase for 6 projects; nothing renews.
What do I need?
A browser and a card for the ₹1 hold. Nothing to install: the browser steps run in a live preview, and the server steps run in a private workspace of your own, with a terminal and git and your own MongoDB.
How long does it take?
This path is 30 steps, about 30 hours: at 20 hours a week, about 2 weeks. Your own path is planned from your idea and sized to what you already know.
Do I keep the code?
Yes. Every step you pass is kept, and you can download the whole project as a git repository with one commit for each step, or publish it to your own GitHub. The code is yours.