Table of Contents
E-Commerce Shop where you can browse, buy and collect Pokémon.
The shop is built as a single-page application (SPA) to ensure a great user experience!
Teaser pictures of the initial design mockups during the planning phase for a first impression of the project:
- Client: Myself
- Project Goal: Improving my software development skills in both frontend and backend as well as Cloud and DevOps. At the same time creating a fun project for a bit of nostalgia (childhood) ;-)
- Number of Project Participants: 2
- Time Period: October, 2024 - Present
- Industry / Area: E-Commerce, Pokémon
- Role: Developer
- Languages: German, English
- Result: Project is still in the development phase.
The project uses the PokéAPI to obtain the Pokémon data.
Although the project is an e-commerce shop, it does not make any commercial profit.
Any commercial transaction is purely exemplary and involves imaginary currency.
- Analyze current status
- Document progress
- Prepare for the next implementation steps
- Backend
- Setting up development environment
- Setting up CI/CD pipeline
- TODO: Insert further steps
- Frontend
- Setting up development environment
- Setting up CI/CD pipeline
- TODO: Insert further steps
As I have suddenly stopped working on the project for a while for certain reasons and unfortunately have not documented the progress in detail, I first need to determine the current status of the project.
Then document it and prepare for the next steps.
The general plan is that the backend is roughly completed first, before the frontend comes next.
For each step in the roadmap, there is an extra project (see tab Projects in GitHub repository) with a Kanban board in the repository, in which the roadmap steps are broken down further.
The project is a full-stack application.
Accordingly, there is both a backend and a frontend folder.
TODO: Implement further details
This tech stack refers to things that are used in the frontend as well as the backend or neither.
For backend or frontend specific tech stack please read the corresponding section in the README.md.
It is best to use the table of contents at the beginning of the README.md to get an overview and jump to the desired sections.
The tech stack - General:
- Mind Mapping Tool: XMind
- IDE: Microsoft Visual Studio
- GitHub (Version Control, Kanban Board, ...)
- Identity and Access Management: AWS IAM
- Identity and Access Management: Microsoft Authenticator
- Hosting (Security): AWS Certificate Manager
- Monitoring: AWS CloudWatch
- Monitoring: AWS Billing and Cost Management
I opted for the tech stack for the following reasons:
Mind Mapping Tool: XMind - Already used in past projects, so already know how to use the tool.
Very good for finding ideas and organizing thoughts.
IDE: Microsoft Visual Studio - Already used in past projects, so already know how to use the tool.
Offers a lot of functions and, due to its popularity, also has a lot of documentation / extensions.
GitHub (Version Control, Kanban Board, ...) - Industry standard.
Even as a solo developer, this is very helpful if you can version manage your code (e. g. undo incorrect changes).
Offers many functions and lots of documentation.
AWS in general - Since I like to deal with the cloud and would like to get better at it, I used one of the most popular cloud providers.
I chose AWS because I have also found several jobs in my area and would like to stay there.
Identity and Access Management: AWS IAM - To increase security of AWS tech stack among other things (e.g. do not use the root user for everything, but non-root users).
Identity and Access Management: Microsoft Authenticator - To set up multi-factor authentication for AWS.
Already used for other things and have been satisfied so far.
That's why I opted for it again here.
Hosting (Security): AWS Certificate Manager - To improve the security of communication over the Internet.
In addition, better user experience when, for example, the browser does not say that the website is insecure and blocks connection, which gives users a greater sense of security.
Monitoring: AWS CloudWatch - As I cannot estimate the costs of AWS, I have set up alerts as soon as certain values exceed a limit.
This means I don't have to check the costs manually every time and can react more quickly.
Monitoring: AWS Billing and Cost Management - Overview of AWS costs.
Goes hand in hand somewhere with AWS CloudWatch Alerting.
TODO: Create and insert diagramm (e. g. AWS)
Contributors:
- Designer: combine visual - Christine Biendl
For the time being, it is not planned to clone / fork the project. This may be changed at a later date.
The URL of the website is: https://trainers-trove.com/
- combine visual - Christine Biendl: Thanks to the designer for her active support! The design isn't finished yet and I can't work on the project all the time due to work and other commitments. I really appreciate the fact that I can ask her for help at any time, that she responds to my questions and creates great designs for me.
- othneildrew: Thank you and the contributors of the
Best-README-template-repository for providing theREADME.mdtemplate! I have already been able to conjure up some beautiful texts for my repositories with it. - PokéAPI: Thanks for providing the Pokémon data! It saves a lot of work by not having to create the data (Pokémon values, Pokédex, ...) myself.
- Creators of the Pokémon Franchise: I was able to build up many great childhood experiences and friendships with it! I still enjoy playing Pokémon today, for example on the Nintendo Switch.
If you have any questions, please feel free to reach out via email: christian-schwanse (at) gmx.net
- Markup Language: HTML
- Markup Language: CSS
- Programming Language: JavaScript / TypeScript
- UI Design Tool: Figma
- Library: React
- Library: Redux
- Build Tool: Vite
- Linting: ESLint
- Testing Framework: Jest
- Hosting (Storage): AWS S3
- Hosting (DNS): AWS Route 53
- Hosting (CDN): AWS CloudFront
I opted for the tech stack for the following reasons:
Markup Language: HTML - No alternative in frontend development.
Markup Language: CSS - No alternative in frontend development.
Programming Language: JavaScript / TypeScript - Defacto standard in frontend development.
Since I am a big fan of the concept of strong or static typing in programming languages, so that fewer errors occur in the code and JavaScript is untyped, I also use TypeScript.
And JavaScript can sometimes do some really wild things...
UI Design Tool: Figma - Design tool from my designer.
It offers a lot and I can leave my comments on the design mockups.
Library: React - I learned React through further education and React also offers the most job opportunities in my area, where I would like to stay.
That's why I chose React.
Library: Redux - Very good for managing states of UI / React components efficiently and easily.
Used together with the Redux Toolkit to make things even easier (e. g. to combine reducers or easy Redux store setup).
Build Tool: Vite - Used to optimize code for the production system (faster build times and smaller bundle sizes).
Was also used in React course and therefore knew the tool - learning curve is smaller.
Linting: ESLint - Linting tools offer a crucial benefit in error prevention by identifying issues as they are created, even before code execution.
This significantly improves code reliability and reduces likelihood of issues ever turning into bugs.
I have used ESLint several times and I am quite happy with it.
Testing Framework: Jest - Already completed projects with it.
Used for Test-Driven Development (TDD).
In my opinion, it offers all the functions you need.
Hosting (Storage): AWS S3 - Scalable object storage service that allows you to store and retrieve data.
The costs are very low and is easy to integrate with other AWS services.
Hosting (DNS): AWS Route 53 - AWS S3 provides predefined "weird" domain (like http://www.domain.com.s3-website.availability-zone.amazonaws.com/).
This is very long and user-unfriendly.
Therefore, AWS Route 53 is used as DNS to create a nice short, user-friendly domain.
The endpoint remains the same for the client and the services can also be exchanged more easily in the background.
Integrates nicely with AWS S3.
Hosting (CDN): AWS CloudFront - Why use a content delivery network if the target group of the project is mainly Germany / country of origin of the repository owner?
The reason: A CloudFront distribution in front of the AWS S3 bucket will reduce the data transfer costs (and making them zero if less than 1 TB is served per month of static content).
It improves performance and security (preventing DDoS attacks e. g.) which in turn can reduce costs.
The frontend is developed according to the mobile-first approach.
A mobile-first approach prioritizes designing for mobile devices before scaling up to larger screens, ensuring a seamless user experience across all devices.
The reason is that, from my point of view, it is easier to develop the desktop view retrospectively than the mobile view retrospectively.
Starting mobile-first ensures a working and simpler design at small screens, and lets the door open to implement more elements, space, features, progressively as the screen size increases.
Other reasons are:
- It forces you to think about the site's bare bones requirements
- You can generally get something up and running faster
- Mobile is the larger share of visitors for many / most sites
The frontend is also being developed as a single-page application (SPA).
A single-page application is a website or web application that dynamically rewrites a current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.
This can result in performance gains and a more dynamic and better user experience (with some trade-off disadvantages like search engine optimization).
When it comes to the development of features, these are documented and prioritized in detail as user stories (using a template and Gherkin syntax) in the GitHub Kanban Board (see Projects tab in repository).
A new GitHub branch is created for each feature.
Tests are then developed according to the Test Driven Development approach (also Behavior Driven Development for UI), which must subsequently be fulfilled.
The development process will also be optimized with CI/CD in the future.
- Programming Language: Python
- Linting: PyLint
- Web Framework: Flask
- Testing Framework: unittest / nose
- Hosting: AWS Elastic Beanstalk
I opted for the tech stack for the following reasons:
Programming Language: Python - Already completed many projects with Python.
I didn't know any other backend language at the time.
I could use JavaScript, but I don't know the backend frameworks.
I know ABAP too - but that's only for SAP...
Linting: PyLint - Linting tools offer a crucial benefit in error prevention by identifying issues as they are created, even before code execution.
This significantly improves code reliability and reduces likelihood of issues ever turning into bugs.
I have used PyLint several times and I am quite happy with it.
Web Framework: Flask - Already completed projects with Flask.
I opted for it (and against Django, for example) because Flask is more suitable for smaller use cases and I don't have the time to build a huge backend anyway.
Testing Framework: unittest / nose - Already completed projects with it.
Used for Test-Driven Development (TDD).
In my opinion, it offers all the functions you need.
Hosting: AWS Elastic Beanstalk - As a RESTful API is being developed, among other things, I need a server / have to host it.
AWS Elastic Beanstalk offers a beginner-friendly setup.
However, I am considering switching to AWS Lambda (Function as a Service), for example.
Originally I wanted to use AWS Elastic Beanstalk, but due to running costs and because this is a hobby project, maybe AWS Lambda with a different payment model (Pay-as-you-go) is cheaper in the long run.
When it comes to the development of features, these are documented and prioritized in detail as user stories (using a template and Gherkin syntax) in the GitHub Kanban Board (see Projects tab in repository).
A new GitHub branch is created for each feature.
Tests are then developed according to the Test Driven Development approach, which must subsequently be fulfilled.
The development process will also be optimized with CI/CD in the future.