- User stories:
- A user who wants to use all the functionalities of the application needs to register himself by clicking "Register" and fill the required fields.
- A user who comes back after some time has to log in by providing the username and password used during the registration process.
- A user can add a new bug by clicking on the "Add a new bug" button, where he can find a form to provide all necessary information.
- A user who wants to see the list of the existing bugs needs to click "Bugs" tab in the navbar or the button "Bugs", next to "Add a new bug" button.
- A user can add a new feature by clicking on the "Add a new feature" button, he will be transferred to a payment form where he can add a credit card details. After the payment is confirmed the administrator of the page can assign the premium status in the admin panel and adding new features will be available for that particular user.
- A user who wants to see the list of the existing features needs to click "Features" tab in the navbar or the button "Features", next to "Add a new feature" button.
- A user who wants to see all the statistics and graphs can click the "About" tab.
- A user who wants send a message can do it by filling up a form at the bottom of the main page.
Pre-implementation mockups:
https://www.docdroid.net/7AJFH5x/unicorn.pdf
The project was built to provide usability and high performance. The user interface is clear and simple not to distract the user from the main functionalities. Attached images help identify the website visually and direct users to right sections of the page. The logo in the left top corner is visible all the time to improve the visual identification. Registration and login requirements help protect user's identity and privacy. The search feature allows a user to find keywords interesting for him. A user can sort lists of bugs and features by title alphabetically and by date. Adding a new bug/feature is straightforward and requires only the title and the description. All the information included in the "About" page is easy to find and interpret. Contact form lets keep in touch with the administrators of the website and leave valuable feedback. The cards with bugs/features include the name of the author, title, description, status, number of views and likes, and a section to leave a comment.
Technologies Used:
- HTML
- JavaScript and JQuery
- SASS
- Bootstrap
- Python and Django
-
Using the main site.
a) The main page displays all basic sections and buttons. Images, texts and styles are visible and loading properly.
b) All link to the subpages were tested and working correctly - leading to the subpages.
c) The front page was tested on a variety of devices and resolutions to make sure that the content is adjusting to the different screen sizes -
Registering / Login
a) A new user can create a new account by adding username and password to the database.
b) Passwords are encrypted before sending to the database.
c) A user can log in to the website using data information provided during the registration process.
d) A user can update the username, email and profile picture in the "Profile" section, where he can also request a password reset. -
Browsing through the bugs/features.
a) All bugs/features are displayed correctly either in specific subpages or in search results.
b) All information provided by the user is visible on the bug/feature card.
c) Bugs/features are grouped by eight on a single page using pagination.
d) Edit function allows adding new information and modifies the existing one, only if the user is the author of the bug/feature.
e) Delete functionality removes the bug/feature from the page and the database only if the user is the author of the bug/feature.
f) The total number of bugs/features is displayed properly and change after adding or removing a bug/feature.
g) Comments added by users are visible at the bottom of the bug/feature card.
h) Total views and likes are calculated properly. -
About page
a) The page is displayed properly with all relevant pieces of information.
b) All the charts are working correctly, displaying necessary information and updating after changes in the database.
- Send message.
a) The message form is working correctly.
b) All required fields have to be filled before sending the message.
c) A new message is received instantly on the provided email address.
Jasmine and Jquery-jasmine were used for testing index.html.
When you run the index.html file, visit:
http://URL.com/jasmine-tests/spec-runner.html
where can be http://localhost:8081/jasmine-tests/spec-runner.html
All the tests conducted by Jasmine check:
- All the buttons on the main page lead to the subpages.
- The navbar contains the necessary class.
- The collapsing menu is activated by click hamburger button.
- The main page has sections with the right ids.
- The footer has all the necessary links to other subpages and social media.
Some tests were done for the backend using the unittest library in Python 3, and the results can be found in the tests folders.
The site was deployed on Heroku.com and can found under this address: https://unicornattractor24.herokuapp.com/. The copy of the final version and previous development version can be found on GitHub: https://github.com/szantilas87/unicornattractor A list of all necessary dependencies is in the requirements.txt file.
To run the project, some environment variables are needed:
SECRET_KEY - any string
For sending messages:
EMAIL_HOST - SMTP server you want to use
EMAIL_PORT - port used by EMAIL_HOST
EMAIL_USE_TLS - True or False
EMAIL_HOST_USER - the email address you want to use
EMAIL_HOST_PASSWORD - password for the email address
Stripe payments:
STRIPE_PUBLIC_KEY = public key provided by Stripe
STRIPE_PRIVATE_KEY = private key provided by Stripe
Storing static and media files in AWS S3:
AWS_STORAGE_BUCKET_NAME = name of the bucket
AWS_S3_REGION_NAME = name of the server
AWS_ACCESS_KEY_ID = access key
AWS_SECRET_ACCESS_KEY = private access key
-https://www.youtube.com/watch?v=UmljXZIypDc&list=PL-osiE80TeTtoQCKZ03TU5fNfx2UY6U4p
- https://www.youtube.com/watch?v=UO98lJQ3QGI&list=PL-osiE80TeTvipOqomVEeZ1HRrcEvtZB_
Traversy Media
-https://www.udemy.com/python-django-dev-to-deployment/
- Google images