I want to be able to bring my ideas to the world quickly and at low cost, so I'm building myself a portfolio site in the MERN stack. This project will give me a custom platform to share information with the world. Simultaneously, I'm developing the skills I need to rapidly prototype and ship future software products.
I'm now upgrading the full website stack from my v0.2 first draft. I've completed a draft frontend and backend in v0.1 and v0.2 respectively. Now I want to add personality, polish, and best-practice programming throughout my project. That means
- Designing a new UI,
- Adjusting the project module structure,
- Finishing the transition from Express/Node to Next.js serverless, and
- Adding advanced features like accessibility/animations/SEO/responsive interfaces.
See dev-notes/todo for more info.
My ambitions for this project are to:
- Create a place where I can share my projects, research, and knowledge with interested people.
- Develop strong fundamental web development skills, and explore interesting advanced topics.
- Hone my project management skills for self-directed projects. I want to perform self-directed machine learning research for my next project, so it's important to learn highly efficient, structured workflow practices.
- Inspire other students to pursue their own self-directed learning.
- Demonstrate a technical competency to future employers.
I am using the MERN stack for this project. I chose this stack because it has
- Strong support from large companies, giving it a long expected lifetime.
- High-quality learning resources on Coursera, my platform of choice.
- Ease of use and high development velocity.
- Strong demand in the global job market.
- Extensive package support.
| Name | Usage | Implemented yet? |
|---|---|---|
| React | Frontend | Yes |
| Next.js | React Framework | Yes |
| Bootstrap | Styling | Yes |
| Node JS | Backend | Yes |
| Express JS | Backend API | Yes |
| MongoDB | Database | Yes |
I'm following the Waterfall development cycle for a couple of reasons:
- I've followed Agile at Chubb, UniMate, and in several uni courses, but I have little experience with Waterfall. I'd like to experience the benefits and drawbacks of both.
- I don't expect the project requirements to evolve much with user feedback.
- I don't want to ship a public-facing representation of myself if it's not finished.
- I want to give myself time to explore, evaluate, test, and implement these unfamiliar technologies. Efficiency is not a primary goal this time around.
- Find some frontend design inspiration. ✅
- Build the app structure. ✅
- Draft the app's key pages and components. ✅
- Add internal navigation/routing using React Router. ✅
- Add example content and a placeholder/draft UI. ✅
- Take blog notes on the development process, particularly focusing on: problems I've faced during development; how I've overcome them; and what I learned through these challenges. ✅
- Write a formal project plan and README. ✅
- Refactor to implement cleaner and more readable code. ✅
- Design and build a MERN backend to retrieve data for the Projects, Blogs, and Email List pages.
- Design and implement the MongoDB databases and collection schemas. ✅
- Design, implement and secure the Node-Express backend. ✅
- Add test data to the Writing database collections. ✅
- Add a Professional Experience page. ✅
- Take blog notes on the development process so far. ✅
See devnotes/todo.txt for more info.
See devnotes/todo.txt for more info.
See devnotes/todo.txt for more info.
Thank you to the authors and maintainers of these resources, as well as all packages credited in the codebase (I will add those here soon).
https://www.coursera.org/professional-certificates/meta-front-end-developer
https://www.linkedin.com/advice/0/how-can-you-optimize-mern-stack-application-performance-mzdhf
https://www.wix.com/ (for prototype UI design inspiration)
Thanks for reading! 🤠
©️ Stephen Elliott 2024. All rights reserved.