Link to App: thecurtainco.com.au
Front-End source code: FE Repo
Back-End source code: BE Repo
By Simon Curran (GitHub: SimoSultan) and Phil Antiporda (GitHub philrussel21)
- Purpose - why the app was built
- Target Audience - what can the app do
- Features and Functionalities - what can the app do
- Tech Stack - the languages that make up the app
- Dependencies and Resources - the node modules used throughout the app and their resources
- Dataflow Diagram - how data flows through the app
- Application Architecture Diagram - how the app is connected
- User Stories - how the app would behave according to different user roles
- Testing - how we intend to test the app
- Sitemap - how the user gets around the app
- Wireframes - the look and feel of the app
- Development Timeline - development log and Trello
- Copyright - legal information
- Authors - who wrote this README doc
The purpose of the app is to migrate the client’s business, along with her ideas, into a dynamic website. This website embodies elegance and sophistication to bring a unique experience to its users. It would be the client’s platform where she can share her suggestions and expertise in the industry while selling curtains and product samples. The website would also allow interested parties to communicate with the client through email thus expanding her own clientele.
The target audience of this website are users that are willing to spend a little bit more in exchange for quality experience and designer-picked products that would help turn a house into a home.
- Admin Authentication
- Admin Authorisation
- CRUD Actions to Collections
- CRUD Actions to Products
- All Users dashboard
- Company Profile Updates
- User Authentication
- User Authorisation
- Browsing anonymity for Casual Users
- Filtering Categories
- Searching Functionality
- Secured Payment with Stripe/Paypal
- User Profile Customization
- Pagination Viewing Experience
- Collection Customization
-
Testimonial Adding Feature
-
Booking System for appointments
-
User Dashboard containing Booking/Appointment details
-
Anonymous casual user's ability to add to Cart before authentication
-
User's ability to leave reviews on a Collection or Product
-
Third Party OAuth (Google, Yahoo, Facebook, Apple, Microsoft)
-
Wishlist feature for users
- ReactJS - A Javascript library used for building user interfaces and the overall Front End of the app.
- NodeJS - A Javascript runtime built on Chrome's V8 Javascript engine used for building the back-end API service of the app.
- MongoDB - Atlas - A global cloud database service for modern applications used as the database for this app.
- PayPal API - The faster, safer way to pay online without sharing financial details used to handle payments securely for this app.
- AWS S3 - An object storage service provided by Amazon where images will be stored for the app.
- Netlify - Hosting service to be used for deploying the React Front-End side of the app.
- Heroku - Hosting service to be used for deploying the Node-Express Back-End side of the app.
- Git - Version control system used throughout the development life of the project.
- GitHub - The hosting service used for the version control system.
- Express JS - for the server that handles requests between the client and database
- Passport - for user authentication
- Passport-Local - for the Passport-Strategy. This module lets the app authenticate users using usernames and passwords.
- Mocha - for integration testing including routes, functions, middlewares and database transactions.
- Chai - Assertion library used for the tests.
- Chai-http - for integration testing with Chai assertions.
- Mongoose - An Object Data Modeling (ODM) library used for MongoDB and Nodejs. Manages relationships with between data and provide schema validations.
- Connect-Mongo - for storing the session into the MongoDB database.
- Express-Session - for letting the app store session data to the server instead of the client.
- Mongoose-Bcrypt - for encrypting, decrypting and verifying fields when stored in the database using bcrypt password-hashing function.
- Nodemon - a developer dependency that automatically restarts the server on a file change to save time
- Dotenv - for storing environment variables containing sensitive information that should remain hidden from the codebase.
- Cors - for providing a Connect/Express middleware that can be used to enable Cross Origin Resource Sharing (CORS) with various options.
- AWS-SDK - for browser-based development which allows developers to access AWS from JavaScript code running directly in the browser.
- Multer - Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files.
- Multer-s3 - This package is used as an integration piece for existing code samples from Multer's storage engine documentation with s3fs as the substitution piece for file system.
- Material UI - for the client side styling
- Material UI Icons - for the icons used throughout the app
- React-Spring - for animations throughout the app
- React-Reveal - for animations throughout the app
- React-Scroll - for animating vertical scrolling (unsure initially if we will use this package)
- React-Responsive - a media query library to detect device sizes and orientation
- React-Router-Dom - handles routing through a single-page-app
- Axios - to make calls to the Curtain Co REST API
- Jest - to run unit tests on client side
- Cypress - if time permits, end-to-end testing across the app
- Trello - for project management
- Draw.io - for the Sitemap, DFD and AAD
- Figma - for the Wireframes
- Stack Overflow for the problem solving
- Website Questionnaire - 1st client meeting questionnaire to gauge idea on what the client is looking for
- Website References - a spreadsheet containing the feedback about websites that the client likes
- Presentation to Client - powerpoint presentation that the client will see about her final site
- As an admin, I want to be able to put new Products in the website, so I can potentially generate more income and offer more selection.
- As an admin, I want to be able set up a new Collection from my existing Products so I can offer more selection to my users.
- As an admin, I want to be able to view my user's details, so I can initiate communication with them.
- As the company owner, I want my users to view the links to my business' socials on every page so I can promote my business better.
- As an admin, I can upload photos to the website when listing a new Product or when setting up a new Collection so I can better catch my user's attention.
- As an admin, I want casual users to not have access to certain pages so I can better secure my website.
- As the company owner, I want to have a page where I can tell my potential customers about myself and my business so that I can connect and develop relationship with them.
- As the company owner, I want a seamless flow where users can float through the site so I can offer them better interface compared to other company's website.
- As the company owner, I want a clean crisp, airy but with warmth user experience so I can differentiate my website to other competitor's website.
- As an admin, I want to be able to edit my business details shown on my site so I can update my users for any changes.
- As a casual user, I want to remain anonymous when just casually browsing the website so I can enjoy my privacy.
- As a user, I want to be able to sign up so I can have full access to the website.
- As an existing user, I want to be able to log in, so I can fully access the website without having to register again.
- As a logged in user, I want to be able to see my details and have an option to update them.
- As a logged in user, I want to be able to see my purchase history so I can review my past purchases.
- As a user, I want to have links available throughout the website so I can easily navigate around.
- As a user, I can see a full selections of Products that I can buy.
- As a user, I want to be able to sift through Products in a form of numerous result pages so I don't have a cluttered page with all the products.
- As a user, I want to be able to search for a particular product in mind so I don't have to go through every single product.
- As a user, I want to be able to filter Products according to their category or type so I don't have to see all Products of unrelated category.
- As a user, I want to be able to pay securely when I have decided to buy something so I don't have to worry about security.
- As a user, I want to have an option to buy a Collection where the owner hand picks Products that goes well together so I can take advantage of the owner's expertise in the industry.
- As a user, I want to see and be able to customise items in the Collection of my choice so I can better personalise according to my taste.
- As a user, I want to be redirected to a certain page when I accidentally visited an invalid or unauthorized link.
- As a user, I want to be able to add multiple items in my cart so I can pay for them all at the same time when I'm done choosing.
- As a user, I want to be able to set the quantity of the products I wish to purchase so that I can buy more than one in one transaction.
- As a user, I want to be able to request a consultation by providing my details.
- As an admin, I can see the data about the types of users using my site so I can better cater their needs.
- As an admin, I have an option to set the vibe/experience (summer, spring, winter deals) of my site so I can have a more dynamic website to my users.
- As an admin, I can see in my dashboard any upcoming appointments with clients.
- As a user, I want to book an appointment in the website and choose a valid time for me and the owner to meet.
- As a user, I want to be able to see all my upcoming booking appointments in my profile page.
- As a user, I want to be shown different deals during different seasons or events.
Jest is the chosen framework for testing client side code, and if time permits, look into implementing end-to-end testing with Cypress.
- Unit testing functions, methods, modules and objects
- Component testing
- Snapshot testing
Mocha and Chai are the chosen technologies to implement automated tests for this app. Tests involve:
- Authorization and Authentication
- Protected Routes
- User Roles
- Transactions
- Products CRUD actions
- Collections CRUD actions
- User CRUD actions
Below are the desktop views of the site. In the essence of time, we have focused on desktop and mobile portrait views of the app and used our spare time to ensure a solid layout and design that the client was happy with. We foresee some small issues and time being spent on ensuring the rest of the tablet views and mobile landscape views, however, when designing these wireframes, a grid like layout was an underlying choice so that Material UI will handle the heavy lifting of the responsive layouts, with small adjustments of course.
Details
Below are all the mobile portrait views of the app. In regards to landscape views, we intend to force the portrait view in this orientation but use a container to center it a bit more so that it is not too stretched. We foresee some tweaking of these views however.
Details
For tablet, we only decided to do the landing page as to see which nav bar and footer would look the best on each screen size and orientation. That was the main objective for these first few preliminary designs shown below. Tablet landscape orientation is intended to replicate the desktop views. But tablet portrait may require some on the fly tweaking.
© The Curtain Co 2020:
7th December 2020
Except as permitted by the copyright law applicable to you, you may not reproduce or communicate any of the content on this website, including files downloadable from this website, without the permission of the copyright owner.
The Australian Copyright Act allows certain uses of content from the internet without the copyright owner’s permission. This includes uses by educational institutions and by Commonwealth and State governments, provided fair compensation is paid. For more information, see www.copyright.com.au and www.copyright.org.au.
The owners of copyright in the content on this website may receive compensation for the use of their content by educational institutions and governments, including from licensing schemes managed by Copyright Agency.
We may change these terms of use from time to time. Check before re-using any content from this website.
Marie Gjorgioski
Contact: marie@marieg.com.au
Portfolio: simonmcurran.com
GitHub: SimoSultan
Portfolio: philantiporda.netlify.com
GitHub: philrussel21
