This application is an online toy gallery for users to showcase their action figures, figurines, plastic model kits, and so on.
It is a full-stack application built using Typescript, React, Node.js, Koa, SCSS, and etc.
LIVE LINK: https://toy-gallery.vercel.app/
- Getting Started
- Running Tests
- Features
- Built With
- Dependencies
- Developer Documentation
- Contributing
- License
Follow these instructions to run the project on your local machine for development and testing purposes.
To run this project and download its dependencies, npm and Node.js are required.
You can check if you have npm and its version by running:
npm -v
If you do not have npm, please download it along with Node.js from Node.js website.
Follow the instructions for your specific operating system, and check for the version again to confirm that it is correctly installed.
To begin, clone this project locally using:
git clone git@github.com:Rammina/toy-gallery.git
After cloning, go inside the project directory:
cd toy-gallery
Follow these instructions to get the frontend up and running.
Go inside the frontend folder (assuming you are already in the project directory):
cd frontend
Install the dependencies with:
npm install
The frontend should now be running.
Follow these instructions to get the backend up and running.
Go inside the backend folder (assuming you are already in the project root directory):
cd backend
Install the dependencies with:
npm install
If you would like to install dev dependencies (required for Typescript type definition files and to run tests):
npm install --save-dev
To run the project locally, use the following command:
npm run dev
The backend requires the appropriate environment variables to run properly. Check .env.example for more details on which are required.
The backend should now be running.
To run the server, one must make an account for both MongoDB Atlas and Cloudinary.
Registration instructions for both sites can be found in:
After creating an account, click New Project and follow the instructions.
After creating a project, click Build a Cluster and follow the instructions for free tier.
After creating a cluster, go to COLLECTIONS and then choose Add My Own Data to create a new database for the server to use.
After creating a database, click CONNECT, follow the instructions, choose Connect your application as the connection method, and then retrieve the following information to put on the .env file:
- MONGO_URL
To setup Cloudinary, one must first create an account. After registration, check the dashboard for the following information and put them on the .env file:
- CLOUDINARY_API_KEY
- CLOUDINARY_API_SECRET
- CLOUDINARY_NAME
To run jest and supertest for the backend, start by installing dev dependencies by running:
npm install --save-dev
Go inside the backend folder (assuming you are already in the project directory):
cd backend
To run jest, run:
npm run test
You should be seeing a message that jest is running as well as test results and logs.
- register with email, username, and password
- validate email using AWS Cognito
- login with email or username, and password
- display a list of toys on a page
- display a specific toy on a page
- sort and nested sort the list of toys on the page
- filter toys based on meta properties
- allow the user to:
- create a toy page
- update their own toy pages
- delete their own toy pages
- upload images of their toys inside a toy page
- store any created and updated toy data in a database
- query Wikipedia API for more information about a toy or franchise
- Responsive design, works on mobile or when resized
- RTL for frontend testing
- supertest for backend testing
- API endpoints tested for success and failure case
- TypeScript - strongly-typed programming language with extensive tooling
- React - JavaScript library for building UIs
- Node.js - back-end JavaScript runtime environment
- koa - lightweight Web framework for node.js
- MongoDB - NoSQL database
- HTML5 - structuring and presenting Web content
- CSS3 - styling Web content
- SASS - CSS preprocessor scripting
//TODO: Update this and fix it
If you would like to examine the documentation related to the application and development process, go to this page.
Note: /docs_md should not be deployed to a production environment.
//TODO: Add ways for others to help improve the project.
This project is licensed under the GNU General Public License v3.0 - see the LICENSE.md file for details.