A fullstack application build for practising technical interview questions.
This project serves as a learning exercise to gain proficiency in the following areas:
- Full development life cycle
- Deploy Back-end to Azure
- Deploy Front-end to Vercel
- 📱 Tech Stack
- 🛠 Project Dependencies
- 🚀 Getting Started / Installation
- 🔌 Usage
- 🪩 Feature List
- 🏛️ Project Structure
- 🚧 Known Issues and Limitations
- 🧭 Contributing Guidelines
- 🌟 Project Reflection
| Dependency | Description |
|---|---|
 |
Java, built using Java 17 |
 |
Maven is used for managing the project's build, report, and documentation from a central piece of information. |
 |
Spring Boot provides a platform for Java developers to develop stand-alone, production-grade Spring applications that you can just run. |
 |
Hibernate is a robust Object/Relational Mapping tool for Java. |
 |
JUnit is a simple and powerful testing framework for Java. |
| Dependency | Description |
|---|---|
 |
React is a JavaScript library for building user interfaces. |
 |
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. |
 |
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. |
| Dependency | Description |
|---|---|
 |
H2 is a fast in-memory database that supports JDBC API and R2DBC access, with a small (2mb) footprint. |
Please refer to the pom.xml file and the package.json file for a complete list of dependencies.
Follow these steps to get the application up and running in your local environment:
- Clone the repo
git clone https://github.com/CeezR/TechCheck
| Steps | Front-end | Back-end |
|---|---|---|
| 2. Navigate into repo | cd front-end |
cd back-end |
| 3. Install Dependencies | npm install |
mvn install |
| 4. Run the project | npm run dev |
mvn start |
Describe how to use the application or project. Explain the main features, interactions, and any necessary steps to get started. You can include code snippets or examples to illustrate usage.
Follow these steps for a good experience:
- Topic Filter inside the meny alowes you to customise the topics that are loaded.
- Click on the QuestionCard to see the answer
- Scroll down for more answer
If applicable, provide a brief description of the project's file structure and organization. This helps readers understand how the codebase is organized and where to find specific components or modules.
Cold Storage Delay: The back-end is currently hosted on Azure, utilizing a cold storage mechanism. As a result, if the page remains inactive for a certain period of time, the back-end code is moved into "cold storage." Consequently, when a user accesses the page after this period of inactivity, there might be a slight delay of a few dozen seconds before the back-end responds to the front-end.
If you want to encourage others to contribute to your project, consider including guidelines for contributions. This can include information on how to submit bug reports, feature requests, or pull requests.
🌱 "Don't bite off more than you can chew. Sometimes, a simple solution is the best solution."
🎯 "Don't build what you think you need, build what you actually need!"
🥴 "KISS (Keep It Simple, Stupid)."
Fresh off completing the core curriculum of the Salt Java Carrier Bootcamp, I was eager to create my very first full-stack application. The goal I set for myself was not merely to produce something tangible, a testament to the 10 grueling weeks of hard work, but also to create something practical and useful. As I was well aware of the challenges awaiting me in the upcoming interviews, this project was designed with a clear purpose in mind.
The task was tied closely to the lessons learned around communication between the back-end and front-end. The application was designed to use an in-memory database to store two entities: Topic and Question, with Topic having a OneToMany relationship with Question. The front-end was responsible for fetching the available topics and displaying the related questions. Moreover, the question list needed to be responsive; as users selected different topics, the question list would automatically update.
To achieve this, I considered two potential solutions:
A single getMapping that returns a list of Topic objects, each containing a list of Question objects. Two separate getMapping calls: one returning a list of Topic names, and the other fetching Question objects for a specific Topic, with the topic name passed as a RequestParam in the URL. I opted for the second solution, motivated by the belief that one should only request the data they need, and admittedly, it also seemed more technically impressive.
In retrospect, the chosen approach led me down a path of complexity that required significantly more effort for a less optimal result. The back-end hosting costs, based on fetch calls, meant that the additional requests were economically unwise, especially given that most calls returned largely similar data.
My initial design was based on an assumption of the application scaling to tens of thousands of questions, whereas, in reality, only a hundred or so were added. While this miscalculation didn't break the application, the time and effort spent on designing the extra endpoint, mapping the entity data into a new object, handling the topic list from the query param, dealing with issues related to special characters in topic names, and managing the additional complexity on the front-end, was substantial and, in hindsight, unnecessary.
This experience served as a valuable lesson 💡 in the importance of keeping things simple, understanding the actual needs of the project, and not overcomplicating the design unnecessarily.