First, add environment variables to the root folder.
#template located in .env.local.example
#save file as .env.local
SIGNED_URL_API=<replace>
BUCKET_URL=<replace>
Second, run the development server:
npm run dev
# or
yarn dev- User can upload a picture
- User can view all pictures
- User can search all pictures
- Reading and Confirming the scope of the assignment
- Using Excalidraw to decompose UI components, user flow, data model, etc
- Group implementation steps. EG Setup and installation, creating core elements, and components, adding state, implementing
- Create time estimation and then implement
https://github.com/gibsonliketheguitar/image-upload-search-tagging-fullstack
- NextJS, Radix Primitive Components, Tailwind React Hook Form
- NodeJs, Imgga, Postgres
- Added my feature: when users upload photos, tags are generated to
- Trying to create core components with tailwind and building off what I have built before
- Using radix component for accessibility
- Learning to use AWS lambda function to create signedURL to upload to S3
- Figuring out how to write POSTSQL queries to save URL to DB
- Docker to build the container for frontend, backend, and DB
- excalidraw plan
- NextJs, Material UI, Jest
- excalidraw plan
- Creating API to return the search data
- fixing some minor bugs
- setting up AWS lambda function to generate signed URL to upload pictures to S3 (only PNG)
- integration of IMGGA tagging service
- writing raw POSTSQL queries
- setting up docker and using docker compose to create and build containers for frontend, backend
- integrating AWS lambda/signedURL with NextJS API and also accept all types of picture
- initial setup of JESt
- The problem decomposition for frontend and backend is good. It's a good idea to have a high-level road map, but when implementing a specific module, it will be worth pseudo coding possible input states, edge cases, and thinking about the core features on paper before implementation. Coding off the cuff is a waste of the time 80% of the time. Solve on paper first then code.
- Should have decompose the backend system a bit more. Waste a lot of time figuring out queries to Postgres. Should have taken the leetcode approach and solved it with pseudo code, and then implement it. I also got bogged down by thinking about querying content based on tags. Wh
- I was overcomplicating the V1 implementation, I thought about implementing a message queue to handle compression on the backend, but that was not asked in the requirements. It's best to clarify requirements to save engineering time.
- Docker compose up (I want to create a full CI/CD pipeline with all the tests)
- Radix primitive components
- debounce, SWR to deal with image caching, etc
- implement what I have learned from "refactoring UI"
- Leetcode is good practice for understanding problems, decomposing them into smaller units, and writing pseudo code before coding
- Seems learning how to do things takes a while, and may not be a good thing during take-home assignments
- Things take time, like writing this read me and bring the projects to a close
- Decompose the problems, Group plan of action together to encourage goal gradient idea, and continue to use the tomato timer to create a good pace.
- The biggest danger is when you code without a plan.
- I look into creating a design system to style UI
- Maybe implement a trie tree on the backend to save words and tags. The current algo on the server side uses brute force O(n^3) algo.
- Look into Machine Learning to search images with a text rather than querying a database
- V1 -> 20+ hrs?
- V2 -> 11+ hrs?
- Decompose the problem, along a high level road map to implementation.
- When implementing a specific modal, think about implementation details like leet code, input state, and edge cases, and write the test first before writing the actual code
- Ask yourself if this is the core feature or if this overkill.
- Have template starter files for material UI and tailwind. Should be able to spin everything up with the docker