Tomodachi is a journal-sharing app that connects native Japanese speakers with native English speakers, and vice-versa. Users create deep relationships while allowing them to learn and practice Japanese, while gaining a deeper understanding of Japanese culture and life. Tomodachi also allows the same experience for users from Japan by helping them improve their English skills and learn what life outside of Japan is like.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Proper use of Markdown
- A concise and compelling elevator pitch
- Description of key features
- Description of how you will use each technology
- One or more rough sketches of your application. Images must be embedded in this file using Markdown image references.
Have you ever wanted to learn Japanese but don't know where to start? Or you want to improve your Japanese but are too busy? Or the conversations you've had on other language learning apps are shallow and go quiet quickly? Tomodachi solves those problems. Learn conversational Japanese by making friends from Japan through our journal-sharing feature. Our app will send you reminders so that you can spend 10 minutes or less if you're busy, or more time if you're free, to write journal entries and read journals from your friends.
Home page:
Sign In page:
Sign Up page:
Journal page:
Explore page:
Profile page:
- Total number of users from each country displayed
- Secure username / password / phone number with verification login over HTTPS
- Journal tab - make an entry
- Journal topics - "what is life like in (your country)", "what are your goals and dreams?"
- Explore tab: see others' journal entries, add your own
- Profile tab: see the user's journal entries and reads
- Sign out
- Delete Account
I am going to use the required technologies in the following ways.
- HTML - Use correct HTML structure for home page, login page, sign up page, journal page, explore page, and profile page.
- CSS - Application styling is sleek, works well on different screen sizes, and follows a consistent style and color palette
- React - Provides authentication pages, journaling, explore, and profile pages as well. Displays live data such as journal entires, current reads, and topics
- Service - Backend service with endpoints for:
- login
- signup
- create, read, update, and delete journal entries
- create, read, update, and delete journal topics
- DB/Login - Store registered users, user login sessions, chats, journal entries (along with likes and comments), and also topics
- WebSocket - Notification when someone reads a journal from the user (if user has clicked on it and stayed on it for 10 seconds or longer)
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Server deployed and accessible with custom domain name - My server link.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- HTML pages - Home / Welcome page (index.html), Login page (login.html), Sign Up page (signup.html), Explore page (explore.html), and My Journal page (myjournal.html)
- Proper HTML element usage - Includes proper header, main, and footer structure, with tables, lists, and img tags.
- Links - Links made between pages and to Github repository
- Text - Mock content created and filled
- 3rd party API placeholder - Translation button avaiable for journal entries in different languages than the current user
- Images - Tomodachi Journal logo and country logos added
- Login placeholder - Login with username and password available
- DB data placeholder - Journal entries and user information that will be stored is shown in mock data among the pages.
- WebSocket placeholder - On the my journal / profile page, notifications of those who read the journal available
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Header, footer, and main content body - Kept header, footer, and main content body structure.
- Navigation elements - Added navigation.
- Responsive to window resizing - Updated to look appealing on different screen sizes.
- Application elements - Added a variety of elements while keeping good structure.
- Application text content - Added text in form of cards and content in journal entries.
- Application images - Added American and Japanese flag images.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Bundled using Vite - Vite installed, also for dev, hotloading works
- Components - Incorporated explore, home, journal, login, and signup components into main app
- Router - App can now use routing and navigation properly with React, for example - signing up, logging in, using the nav bar, and other buttons work properly.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- All functionality implemented or mocked out - Users can now sign up and login, journal entries can be added by users, journals can also be translated (translation is mocked for now) via API, and users can log out.
- Hooks - Added notifications on Journal page, simulating people reading your journals. "Reading" is defined as a person clicks on your journal and stays on it for at least 8 seconds.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Node.js/Express HTTP service - Nodejs and Express HTTP service has been set up.
- Static middleware for frontend - verifyAuth middleware protects other routes
- Calls to third party endpoints - Backend calls translation API (it takes a couple seconds to load after you hit the Translate button when you click on a journal on the Explore page).
- Backend service endpoints - Backend supports GET journals and users, GET specific journal and user.
- Frontend calls service endpoints - Journals page gets MyJournals. Explore page gets all journals.
- Supports registration, login, logout, and restricted endpoint - Login and Sign up available, also logout. Other routes protected with authentication and restrictions.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Stores data in MongoDB - Stores users and journals, updates journal reads and user tokens
- Stores credentials in MongoDB - Stores username, encrypted password, user tokens, and logs out successfully
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Backend listens for WebSocket connection - Backend listens for on message.
- Frontend makes WebSocket connection - Frontend makes websocket connection.
- Data sent over WebSocket connection - JournalReadNotifications are sent over websocket when a user taps on a journal to read on the explore page.
- WebSocket data displayed - JournalReadNotifications are displayed if the notification pertains to a journal owned by the user. Notifications will show on the Journals page (user journals only) page.
- Application is fully functional - Application is now fully functional!