For the following versions I want to add an option so that the user can view the glasses model using augmented reality technology, we also want to implement the ability to customize a glasses model.
The IMPRESIÓNAME Project is an initiative of the Esteve Terradas e Illa Institute of Barcelona. Participating in this project:
- Esteve Terradas i Illa Institute (Barcelona).
- CIPFP MISLATA (Valencia)
- Technological Institute of the Canary Islands (ITC).
- IES El Rincón (Las Palmas).
- LASERCAN (Valencia)
The objective of the project is to create an App that allows customers to create their own glasses at from different 3D models using augmented reality so that the user can go seeing how it looks. Once you are satisfied with the design you can purchase said design at the web and finally it will arrive printed at your home.
- MODEL AND DIAGRAMS INFO
- USER REQUIREMENTS
- USER MANUAL
- INSTALLATION MANUAL
- BUILD WITH
- PLANNING
- MOCKUP
- POSTMAN
- AUTHOR
- CONCLUSION
If you are a guest, you will see the home, all the shops pages, and you can log-in and register also.
If you are a user, you will see the catalogue and you can add products and buy it, you can go to your profile and there you can view and add address, edit update and log out, you can also see all your purchases.
If you are an admin, you will see the same features like user but you can add, edit and delete products and finally you can edit and remove the status of users purchases (still in progres).
This a web application, since currently it only works in web browsers. These applications stand out for their universal accessibility, eliminating the need for installation and allowing centralized maintenance. They are cross-platform, scalable and flexible. Additionally, they offer convenient access from anywhere, promote real-time interactivity, and are search engine friendly.
Make a point that the app is not responsive, it is designed for PC / laptop devices due I was running out of time.
-
Intuitive Design:
- Ensure that the navigation and overall site design are intuitive, allowing users to easily find what they are looking for. Guest options should be accessible to everyone, and user options are available from the same page.
-
Design Consistency:
- Maintain consistency in the design across all pages to make users feel comfortable and avoid confusion when transitioning from one section to another.
-
Color Contrast:
- Maintain good contrast between text and background to facilitate readability.
-
Forms:
- Simplify forms as much as possible by removing unnecessary fields and organizing them into clear sections.
-
Clear Error Messages:
- If a user makes an error while completing a form, provide clear error messages and suggested solutions to address the issue.
-
Language Simplification:
- Use clear and simple language throughout the content to make it understandable to the all the possible audience.
-
Meaningful Icons:
- Use icons with clear and universal meanings. Provide labels or tooltips for users who may have difficulty interpreting icons.
In case you need to download NodeJS.
You can check your version with:
npm -v
Recommended to have version: 9.6.7 or higher.
Then, you need to git clone the repository:.
git clone https://github.com/adanph15/Impresioname.git
When you have cloned the project, you will need to move to the backend folder to install the dependencies this way:.
cd Impresioname/
cd backend/
npm i
In another terminal you will do the same, you will go to the folder in which you have cloned the project and then follow these commands:.
cd Impresioname/
cd frontend/
npm i
First, in MySQL you need to create a new Data Base.
Then, in the backend you need to create the .env with your data.
If you don't know how to do it, I have a .env.example which you can copy and change the name to .env, once this you would fill it in with your data:.
DB_NAME will be the name of the DB that we created previously.
DB_PASSWORD_ will be the root user password to access the same DB.
To start the backend we will follow this command being inside the /backend folder of the project:.
npm run dev
To start the frontend we will follow this command being inside the /frontend folder of the project:.
npm start
- If you want to see the API Backend, import into POSTMAN the file in the the folder POSTMAN.
In my conclusion, I think that I have worked a lot on the project over the months, in these last weeks/months I have spent most of the time adding functions to the frontend, such as a section to customize glasses without having to use a camera, that is, rendering models using threejs, apart from that I decided to learn how to use the CSS framework Tailwind CSS and started to replace and implement this framework in almost the entire project, except for animations and other functions in which it is necessary to have a traditional CSS file.
But I would have loved to have had more time to make the app responsive to more devices and also create a better purchasing system.
Thanks to ITC for such an interesting project and with a technological stack that I really like.