Interactive photo art studio with HTML/CSS/JS/jQuery/NodeJS/Angular/bootstrap
$750-1500 USD
Paid on delivery
ONLY VERY PROFESSIONAL CANDIDATES. PLEASE READ THE JOB DESCRIPTION BEFORE APPLYING. THIS IS NOT A PHP/LAMP PROJECT! Strong JS framework and REST API understanding needed!
------------------------------------------------------------------------------
-This is a small web site/online studio for creating personal artwork from different photos stored in root folder. We need you to build ONLY THE FRONT END part of the project. No backend work is necessary. Here is the mock design attached according to the flow of the site by image numbers. The site should be designed with pure client side tools like HTML5, JavaScript, CSS and any other JS libraries/framework angular, jQuery, bootstrap, or NodeJS. Here are the overall functionality:
1. The home page would have different images displayed as banners organized in different rows. A particular row can be made of 1/2/3 images based on the width of the images. It would load all images automatically that found in a folder called config/home_page
2. Once you click "Spell Your Word" button from home page second page should load transparently to the user without refreshing the entire page. On this page user can choose different images for each letter and signs by clicking on them. If I press A then all A related letters should load, If I click on D all D images should load and so on. If color tab is selected then color images would load for the same letter, same goes for sepia. Users would drag and drop an image from top panel to bottom panel in order to spell a word. Bottom panel has add/remove word buttons. By pressing add user can add blank space between words to spell multiple words and remove would simply remote the last word. Every image item needs to have minimum 4 properties
a) Itemid b) variationid c) price d) item_path.
Upon loading images you have to populate these fields and pass to the next screen for price calculation and inventory update.
3. Once user happy with the words they spelled, they move on to framing. Frame screen loads the words in two different options. First one is Lego display, where you display the images in various fashion. The second one is regular horizontal one frame display with a gap between each image. The key thing here is all these images and frames have to be displayed according to what user chose in the previous screen and carry over to this screen and programmatically blend with framing images to give complete finished look. Image blending and processing technique would be necessary to display them on the fly along with calculating price.
4. Then users moves on the checkout page. There would be two payment options paypal/credit card. Once customer hit pay button it would should submit the itemid, variation id, price, quantity, for the selected items to the next contact us screen. Only paypal integration is necessary no CC Payment integration is not necessary at this point.
5. Last screen is contact us which might have order info if and order is submitter otherwise a clean from to send us message.
- Only other thing is you have to do the social media plugin integration that each page has in the design. Again, that is just using JS from client side. We don’t have to save those social media data anywhere.
-We want very simple CLEAN design, no flashy stuff or server side coding is required. Site should be very interactive and fast. The site should have a transparent background image that could serve as a wrapper image for all the pages. We will provide sample images that you could use to make a wrapper image.
-PAGES CAN’T HAVE SCROLL BARS. All display should be compact and dynamically proportioned to fit the screen. Remember, this is a custom artwork design tool not a regular website or blog.
That's all pretty much, we will walk you through again and discuss the functionality details to address the question you might have. Let’s get the ball rolling and can’t wait to see your great work!
Cheers,
SolutionJet
the job requires graphics design including font, color, theme, background images as well as firebase integration to get images and payment integration . Here are the details tasks breakdown for milestones:
Here is the milestone breakdown:
1. Project setup/boilerplate
o React project setup (toolchain/build)
o Major dependencies added (Redux data store, react-router)
o 5x page frame components contained in responsive outer frame component
o react-router page-to-page routing
o 1 days
2. Home page
o Banner components (variable size with placeholder images)
o Social media component (nonfunctional)
o Navigation to Studio screen
o Place holder modal for contact us modal component
- make a test deploy to firebase at this point to make sure there is no issue.
o 1 day
3. Studio page
o Letter selection component
o Symbol selection component
o Outer letter selector component
o Color selection component
o Place holder letter images
o Navigation to Frame page
o 3 days
4. Framing Page
o Back side view toggle
o Side purchase components (place holder interaction)
o Lego view component
o Horizontal view component
o 2 days
5. Order review
o Place holder integration
o Basic business rules in component
o Validation
o 1 days
6. Order Confirmation
o Place holder interactions
o Contact us components
o 1 day
7. Home page (functional)
o Request banners from Firebase api
o Dynamically size banners
o Social network button integration
o 1 day
8. Studio page (functional)
o Pull available images (with price, item id, variation info) from Firebase, cache in Redux data store
o Image selection integrated with Redux store (basis of purchase)
o Add composed word with options as order to Redux store
o 1 day
9. Framing page (functional)
o Pull prices from Firebase (selected images and calculate price, no additional firebase call necessary)
o Integration with Redux store (add items to order)
o Social media integration
o 2 days
10. Order review (functional)
o Population of order information
o Integration with redux store
o Integration with PayPal / order submission
o 2 days
11. Order confirmation (functional)
o Integration with redux store
o Retrieved order information (Firebase integration) (no call necessary firebase won’t keep any ordering info, order info would be available based on the cart from previous screen).
o Firebase integration contact us (will send an email message directly to sales@photospellgifts.com from the client side)
o 1 day
12. Integration of graphic assets (with any modification, testing and bug fixing)
1. 3 days
Project ID: #14235376
About the project
32 freelancers are bidding on average $1394 for this job
Let's discuss more about project to finalise the proper scope with estimated cost and time so ping me over the freelancer chat.....I will share some demo as well for recent works if you want to check. Relevant Skills More
Hi, We have strong Skills of NodeJs and other skills that you have mentioned. I have reviewed your project in detail, however, can't provide feedback due to limited words in this field. Relevant Skills and Experience More
Hello! I have got acquainted with your requirements and have a proposal as well as some questions that we should discuss. The price and timeline are negotiable. We will agree on final estimation after discussio More
Hello, I have enough experience to help you. Req-s are clear, of course need calls about. I have the team that can help and speed up the development. Let's discuss details. - Volodymyr Relevant Skills and Experience H More
hello, My experience would give you a creative virtual studio and technology I would take care. thanks for providing detailed specification. Give me a try. Regards,
hi this is vinodh. I have a years experience in AngularJs. I done lot of projects in individual . so many clients also apreciate to me.
Create Front end for small web site/online studio (5 pages), reviewed attachment for more details. Relevant Skills and Experience HTML, CSS, JS, jQuery, NodeJS, Angular, bootstrap, UI/UX design . Proposed Milestones More