WFC-ards
- 7 Devlogs
- 17 Total hours
A PHP language web application with flashcards for learning.
Ship #1
WFC-ards is finished!
Hi everyone, I’ve finished my PHP web application with flashcards for learning. Create folders, add your own flashcards, and study them with an interactive interface.
How to use
Test it:
flashcards.nahida4479.org
Or run it locally with the pre-built Docker image:
docker pull ghcr.io/nahida4479/wfc-ards:latest
docker run -d -p 8000:8000 ghcr.io/nahida4479/wfc-ards:latest
How it works
- Create an account (your password is hashed!)
- Click “Add flashcards” in the top right corner
- Create a folder, then click on the folder name
- Add your flashcards (you can delete a flashcard by clicking the trash icon in the “Your flashcards” section)
- After saving a flashcard, click I finish to finish adding cards
- Click the flashcard panel to flip it, and click “Next” to move to the next one (once you’ve created more than one flashcard)
You can create unlimited folders, and switch between them using the “Your flashcards folder” panel on the left.
Summary
I spent a lot of time on this project since it was my first time working with PHP. My biggest struggle was CSS styling. Good luck with your own projects :)
56m 2s logged
2h 31m 43s logged
Devlog 6
New
- Created a Docker image for the app (PHP + MariaDB in one container)
- Added a GitHub Actions workflow that builds the Docker image with buildx
- Added the ability to create and delete flashcards within a folder
- Added a live preview for the flashcard question and answer while typing
- Added a “Your flashcards” list showing existing flashcards in the folder
Planned
I’m planning to update the styling of the main page (index.php).
1h 26m 40s logged
Devlog 5
New
- Added a “How to use” section
- Cleaned up the CSS (reorganized and simplified the code)
- Created the
createflashcard.phpfile, with a query pulling the selected folder’s name
Challenges
Rebuilt the whole page layout using nested flexbox containers instead of the manual negative margins.
Planned
I’m planning to build the flashcard creation form for the selected folder.
2h 12m 38s logged
2h 6m 8s logged
5h 39m 21s logged
Devlog 2
New
- New
userstable in the database - Login and registration system with password hashing
- Login and registration website panels
- Login session system
- Logout system
- Mobile device support for login and registration panels
- Login and registration error handling
Login/Registration System
I built my first login and registration system, based on PHP and a MySQL/MariaDB database. I used the password_hash function for user security. I also added $_SESSION support across the website, so the app remembers which user is logged in between pages. The registration system requires a minimum of 8 characters for the password.
Planned
I’m planning to style the header tag and build the flashcards panel. I also plan to add the ability to export flashcards.
2h 15m 1s logged
Devlog 1
New
- Planned work on the project
- Created the MySQL database
- Connected to the MySQL database
- Created a temporary flashcard design
- Added flashcard flip animation
- Created the schema.sql file
Idea
I am planning to create a flashcard web app with support for mobile devices and desktop. I will use the MySQL/MariaDB database for the application. For the backend, I will use the PHP language.